當用戶點擊網絡鏈接時如何更改菜單欄的顏色

我想要喲當用戶點擊其他導航按鈕時，我更改顏色的教堂中的其他導航按鈕我不不我該如何通過代碼來做到這一點是一個圖像如下： enter image description here 當用戶點擊網絡鏈接時如何更改菜單欄的顏色

當用戶點擊鄰接，然後該顏色應該改變爲橙色和主頁活躍的橙色將是黑色的，約將是橙色。我想通過JavaScript來做到這一點。這裏是下面的代碼行。

<div class="container clearfix"> 
      <nav id="menu" class="navigation" 
      role="navigation" style="float: left"> 
      <a href="#">Show navigation</a> 
      <ul id="nav"> 
      <li class="active"><a href="Default.aspx">Home</a></li> 
      <li><a href="About.aspx">About</a></li> 
      <li><a href="TP.aspx">T-P</a></li> 
      <li><a href="MP.aspx">M-P</a></li> 
      <li><a href="BM.aspx">B-M</a></li> 
      <li><a href="RB.aspx">R-B</a></li> 
      <li><a href="LC.aspx">L-C</a></li> 
      </ul>   
     </nav> 
    </div>

我使用這個JavaScript來改變它。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ 
jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript"> 
var make_button_active = function() 
{ 
    //Get item siblings 
    var siblings =($(this).siblings()); 
    //Remove active class on all buttons 
    siblings.each(function (index) 
    { 
     $(this).removeClass('active'); 
    } ) 
    //Add the clicked button class 
    $(this).addClass('active');} 
    //Attach events to menu 
    $(document).ready(
    function() 
    { 
    $(".menu li").click(make_button_active); 
    } ) 
</script>

但沒有任何事情發生請讓我知道我該怎麼做。任何人有任何想法？

謝謝你

來源

2013-08-19 Vikram

HTTP：//forums.asp。 net/t/1472219.aspx/1 –

在CSS中你應該定義一個活動類：'.active {background-color：＃F18E40;}' – afzalulh

喜更簡單的方法，摩擦類鋰

string thisURL = this.Page.GetType().Name.ToString();  
     switch (thisURL) 
     { 
      case "home_aspx": 
       lihome.Attributes.Add("class", "Active");     
       break; 
     case "support_aspx": 
       lisupport.Attributes.Add("class", "Active"); 
       break; 
     case "logout_aspx": 
       lilogout.Attributes.Add("class", "Active"); 
       break; 
     }

需要做頁面的加載事件的代碼，它會工作的是投票支持這個解決方案=）

來源

2013-08-25 13:11:41 Vikram

這裏有很多問題。對於一個菜單是一個ID的值，所以你需要在jquery中用$（'＃menu「）引用它。下面是你的代碼的一個工作版本。我必須刪除href屬性才能實現所需的樣式更改最小的努力，您現在有兩種選擇：

使用此代碼，並動態地使用JavaScript和CSS顯示屬性

在您網站的每個頁面修改標記，設置活動導航項目交換內容;與這種方法javascript沒有必要。

<htmL> 
<head> 
<script type="text/javascript"> 
    var make_button_active = function(){ 
    //Get item siblings 
    var siblings =($(this).siblings()); 
    //Remove active class on all buttons 
    siblings.each(function (index){ 
     $(this).removeClass('active'); 
    }); 
    //Add the clicked button class 
    $(this).addClass('active'); 
    } 
    //Attach events to menu 
    $(document).ready(function(){ 
    $("li").click(make_button_active); 
    }); 

</script> 
<style> 
    .active{ 
    background-color: red; 
} 
</style> 
</head> 
<body> 
    <div class="container clearfix"> 
    <nav id="menu" class="navigation" 
    role="navigation" style="float: left"> 
    <a href="#">Show navigation</a> 
    <ul id="nav"> 
    <li class="active"><a>Home</a></li> 
    <li><a >About</a></li> 
    <li><a >T-P</a></li> 
    <li><a >M-P</a></li> 
    <li><a >B-M</a></li> 
    <li><a >R-B</a></li> 
    <li><a >L-C</a></li> 
    </ul>   
</nav> 
</div> 
</body> 
</html>

來源

2013-08-19 19:09:12 Peter

當用戶點擊網絡鏈接時如何更改菜單欄的顏色

回答

相關問題