變更<a> JavaScript的標籤

-4

我如何利用JavaScript將活動鏈接狀態移動到另一個鏈接？變更<a> JavaScript的標籤

請參閱codepen：

http://codepen.io/Krish1980/pen/mGfed

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
<script type="text/javascript"> 

$(function(){ 
$('#nav a').on('click',function(){ 
$('#nav li').removeClass('active'); 
$(this).parent().addClass('active'); 
    }); 
}); 
</script>

來源

2013-05-02 Charles

包括你的代碼**在你的問題**，不僅如此，但顯示你自己的嘗試。 – George 2013-05-02 17:09:27

js塊是空的...寫一些東西在裏面，然後再試一次;） – stecb 2013-05-02 17:09:34

你嘗試了什麼？你有什麼麻煩？ – SLaks 2013-05-02 17:09:37

//Wrap the click handler in DocumentReady so that the handler is 
//attached only after the elements have been loaded into the DOM 
$(document).ready(function() { 

    //Attach the click handler to all <li> elements that are under 
    //the element with ID "nav" 
    $("#nav li").click(function() { 

     //Whenever one of the <li> elements is clicked, remove the 
     //"active" class from any element that currently has it. 
     $(".active").removeClass("active"); 

     //Add the "active" class to the element that triggered this function 
     //(the <li> that was clicked) 
     $(this).addClass("active"); 

    }); 

});

如果要複製這個代碼粘貼到一個.html文件，並用瀏覽器打開它，你會看到它的工作方式你想要它：

<html> 
<head> 
<style> 
body{background:#f9d867; margin:0; padding:0;} 
#nav{display:block; background:#f5f5f5; 
-moz-box-shadow: 0 0 4px 0px #999; 
-webkit-box-shadow: 0 0 4px 0px #999; 
box-shadow: 0 0 4px 0px #999; margin:0; padding:40px 20px; list-style:none; text-align:center; } 
#nav li{display:inline-block;} 
#nav li a{display:block; padding:10px 15px; font:1em "Arial Black", Gadget, sans-serif; color:#444; text-decoration:none; text-transform:uppercase;} 
#nav li a:hover{color:#999;} 
#nav li.active a{background:#fff; 
-moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1); 
box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.1);} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#nav li").click(function() { 
     $(".active").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 
</script> 
</head> 
<body> 
    <ul id="nav"> 
     <li> 
     <a href="#">art</a> 
     </li> 
     <li> 
     <a href="#">archive</a> 
     </li> 
     <li> 
     <a href="#">about</a> 
     </li> 
     <li> 
     <a href="#">blog</a> 
     </li> 
     <li class="active"> 
     <a href="#">contact</a> 
     </li> 
    </ul> 
</body> 
</html>

來源

2013-05-02 17:21:16 Stoop

謝謝喬。我想這對慢速打字機不友好。 – Charles 2013-05-02 17:31:40

我確實花時間閱讀了FAQ。我是一名初學者，並試圖學習一些非常簡單的JavaScript函數。我猜她發佈的內容是「不受歡迎的初學者」。在問一個問題的一分鐘內，你會被所做的一切錯誤毆打。 – Charles 2013-05-02 17:34:08

我將它添加到codepen。沒有運氣。有什麼想法嗎？ – Charles 2013-05-02 17:43:54

變更<a> JavaScript的標籤

回答

相關問題