使用 JQuery 在导航栏中切换活动类答案

【问题标题】：Toggle active class in nav bar with JQuery使用 JQuery 在导航栏中切换活动类
【发布时间】：2011-06-23 19:27:53
【问题描述】：

<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

所以我想绑定到每个 ID 的click，并在被点击的那个上设置class="active"，然后从所有其他 ID 中删除它。

前半部分可以，后半部分怎么做？

【问题讨论】：

标签： jquery html css

【解决方案1】：

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

为<li> 提供有意义的类是明智的，这样您就可以正确选择那些，但您明白了。

【讨论】：

【解决方案2】：

无需将点击事件绑定到每个 ID，而是绑定到此无序列表的所有列表项。然后使用 .parent().children() 方法。以下应该工作：

$('ul li').click(function(){
  $(this).addClass('active');
  $(this).parent().children('li').not(this).removeClass('active');
});

【讨论】：

7 年后评论，但是：$(this).addClass('active').siblings().removeClass('active')

【解决方案3】：

你可能会发现这个更好（否则页面会跳转） -

$(function() {
$("li").click(function() {
  // remove classes from all
  $("li").removeClass("active");
  // add class to the one we clicked
  $(this).addClass("active");
  // stop the page from jumping to the top
  return false;
});
});

【讨论】：

如果要防止页面跳转，只需在事件上调用 preventDefault() 即可。返回 false 可能会产生意想不到的副作用，例如阻止未来的事件传播。 $("li").click(function(e) { e.preventDefault(); });

【解决方案4】：

你可以这样做：

$('li').click(function(e){
    e.preventDefault();
   $(this).addClass('active');
    $(this).siblings().each(function(){
        $(this).removeClass('active') ;

    });
});

在这里摆弄http://jsfiddle.net/UVyKe/1/

【讨论】：

7 年后评论，但是：$(this).addClass('active').siblings().removeClass('active')

【解决方案5】：

给 ul 一个 id 或 class，然后选择它。

<ul id = "nav">...

var $navItems = $('#nav > li');
$navItems.click(function(){
    $navItems.removeClass('active');
    $(this).addClass('active');
});

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

您可以使用下面的单行添加活动类而不使用任何事件

$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');

link to refer

【讨论】：