Jquery css中的活动选项卡

我有很长的引导主题类结构

这是我正在设计的菜单。

在bootstrap中具有此菜单栏设计的代码-

   <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </a><a class="brand" href="#">My Menu</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a  href="/Home/Dashboard"><i class="icon-home icon-white"></i>Dashboard</a></li>
                            <li ><a href="#" id="taskMainLink">Task</a></li>

                            <li><a href="#" id="contactMainLink">Contact</a></li>

                            <li><a href="#" id="appointmentMainLink">Appointment</a></li>

                            <li><a href="#" id="projectMainLink">Project</a></li>

                            <li><a href="#" id="salesMainLink">Sales</a></li>

                        </ul>

---

我是在上课吗？如果我在这里错了，请给我建议正确的解决方案。

这应该可以解决问题：

$('ul.nav li a').click(function(e){
    e.preventDefault();
    $(this).parent().find('li.active').removeClass('active');
    $(this).addClass('active');
});

---

我认为使用引导组件可能更容易实现这一点

尝试将这些按钮下拉列表与组件一起使用，使您的按钮组合在一起，并应用css使其看起来像您当前的菜单

您将不需要任何额外的JavaScript来使菜单正常工作

试试这个：

$('ul.nav li a').click(function(){
    $(this).parent().parent().children('.active').removeClass('active');
    $(this.parentNode).addClass('active');
    return false;
});

---

请您对parentNode给出评论，它是如何找到父元素的？

this.parentNode

是选择父节点的选择器。

$('ul.nav li a').click(function(){
    $(this).parent().parent().children('.active').removeClass('active');
    $(this.parentNode).addClass('active');
    return false;
});