如何循环遍历菜单并删除类，然后将类添加到当前菜单项

发布于 2024-08-25 14:22:54 字数 642 浏览 9 评论 0原文

我有这个菜单结构，用于浏览内容滑块面板。

 <div id="menu">
  <ul>
    <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
    <li><a href="#2" class="cross-link">Menus</a></li>
    <li><a href="#3" class="cross-link">Wines</a></li>  
    <li><a href="#4" class="cross-link">News</a></li>   
    <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>

我想循环遍历这些元素并删除突出显示类，然后将突出显示类添加到当前/上次单击的菜单项。

有什么想法吗？任何帮助将不胜感激。

谢谢

乔纳森

原文

I have this menu structure that is used to navigate through content slider panels.

 <div id="menu">
  <ul>
    <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
    <li><a href="#2" class="cross-link">Menus</a></li>
    <li><a href="#3" class="cross-link">Wines</a></li>  
    <li><a href="#4" class="cross-link">News</a></li>   
    <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>

I would like to loop through these elements and remove the highlight class and then add the highlight class to the current / last clicked menu item.

Any ideas? Any help would be greatly appreciated.

Thanks

Jonathan

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉城メ夜风 2024-09-01 14:22:54

可能是这样吗？

$('#menu li a').click(function(){
  $('#menu li a').removeClass('highlight');
  $(this).addClass('highlight');
});

May be so?

$('#menu li a').click(function(){
  $('#menu li a').removeClass('highlight');
  $(this).addClass('highlight');
});

回复收藏 0 原文

似狗非友 2024-09-01 14:22:54

...your <head> and opening <body> tags...
<div id="menu">
   <ul>
     <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
     <li><a href="#2" class="cross-link">Menus</a></li>
     <li><a href="#3" class="cross-link">Wines</a></li>  
     <li><a href="#4" class="cross-link">News</a></li>   
     <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>
<script type="text/javascript">
(function( $ ) {
 $( "#menu ul li a" ).click( function() {
    $( this ).parent().parent().filter( 'a' ).removeClass( 'highlight' );
    $( this ).addClass( 'highlight' );
 });
})( jQuery );
</script>
</body>
</html>

...your <head> and opening <body> tags...
<div id="menu">
   <ul>
     <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
     <li><a href="#2" class="cross-link">Menus</a></li>
     <li><a href="#3" class="cross-link">Wines</a></li>  
     <li><a href="#4" class="cross-link">News</a></li>   
     <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>
<script type="text/javascript">
(function( $ ) {
 $( "#menu ul li a" ).click( function() {
    $( this ).parent().parent().filter( 'a' ).removeClass( 'highlight' );
    $( this ).addClass( 'highlight' );
 });
})( jQuery );
</script>
</body>
</html>

回复收藏 0 原文

~没有更多了~