的jQuery/JavaScript的 - 高亮的菜單時，它的用戶點擊

嗨
假設我有一個菜單，如：的jQuery/JavaScript的 - 高亮的菜單時，它的用戶點擊

<ul> 
<li><a href="xxx">notebook</a></li> 
<li><a href="xxx">camera</a></li> 
<li><a href="xxx">phone</a></li> 
</ul>

當我點擊菜單上，菜單將被如果點擊另一個突出，菜單中，此菜單將突出顯示，其他菜單將返回原始狀態（不突出顯示）。有人可以給我一些想法如何做到這一點（爲<li>或其他任何東西創建一個監聽器）？
感謝您

來源

2010-12-16 Charles Yeung

你有什麼JavaScript的嘗試到目前爲止？ – JasCav 2010-12-16 16:41:54

當用戶點擊時，他們是否會跟隨新頁面的鏈接，或者您是否有一些JavaScript捕捉點擊併發送後臺請求？ – Dancrumb 2010-12-16 16:43:34

@Dancrumb - 一個'href'也可以'#id'; – 2010-12-16 16:45:46

最有效的辦法是通過.delegate()，像這樣：

$("ul").delegate("li", "click", function() { 
    $(this).addClass("active").siblings().removeClass("active"); 
});

然後，只需給它一些造型相匹配，例如：

.active a { color: red; }

You can test it out here，如果你想要點擊已激活的<li>以使其處於不活動狀態，請將.addClass()更改爲.toggleClass(),like this。

來源

2010-12-16 16:44:07

很不錯，但是你並沒有真正解釋如何使用它，就像使用'onLoad'或'$（document）.ready（）'（所以給charliegriefer +1） – JohnB 2010-12-16 18:03:10

好的答案，但對於jQuery版本超過1.7可以使用簡單的.on（）代替.delegate（） $（elements）.on（events，selector，data，handler）; – user3172663 2015-07-24 12:00:19

您沒有提供很多去，但假設這是頁面上的唯一無序列表...

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul li').click(function() { 
      $('ul li').removeClass('highlight'); 
      $(this).addClass('highlight'); 
     }); 
    }); 
</script>

因此，任何麗被點擊的情況下，「亮點」類（假設有是你所說的突出部分）從所有李元素中移除。然後，觸發點擊的人將獲得高亮級別。

可能會更好地讓'a'元素實際觸發jquery，現在我想到了它。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('ul li a').click(function() { 
      $('ul li').removeClass('highlight'); 
      $(this).parent('li').addClass('highlight'); 
     }); 
    }); 
</script>

這是我可以做的最好的給你提供的信息。

來源

2010-12-16 16:47:35 charliegriefer

的jQuery/JavaScript的 - 高亮的菜單時，它的用戶點擊

回答

相關問題