Простой Java Script Issue

Question

У меня ужасное время с первым из следующих сценариев. Я не уверен, что проблема в том, что на странице есть два похожих сценария или неверный код HTML5. Любая помощь будет оценена:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$('.btn').click(function(){ 
$('.btn').removeClass('active'); 
$(this).addClass('active'); 
}); 
</script> 

<script type="text/javascript"> 
function MM_showHideLayers() { //v9.0 
var i,p,v,obj,args=MM_showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) 
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; 
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } 
obj.visibility=v; } 
} 
</script> 

</head> 

И Целенаправленное HTML:

<div class=links> 
<ul> 
<li> 
<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> | 
</li> 
<li> 
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> | 
</li> 
<li> 
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a> 

</li> 
</ul> 
</div> 

Как уже говорилось, проблема заключается в первом сценарии, где мое намерение состоит в том, что активный якорь должен вернуться к якорю по умолчанию атрибут, так как другие пользователи кликают.

Еще раз спасибо.

Answer 1

Wrap все в document.ready()

<script> 
$(document).ready(function(){ 
    $('.btn').click(function(){ 
    $('.btn').removeClass('active'); 
    $(this).addClass('active'); 
    }); 
}): 
</script>