css – 如何将活动类设置为从twitter引导导航菜单

我是叽叽t witter的bootstrap的新手.使用导航菜单.我正在尝试将活动类设置为选定的菜单.
我的菜单是 –

<div class="nav-collapse">
                <ul class="nav">
                    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
                    <li><a href="#">Project</a></li>
                    <li><a href="#">Customer</a></li>
                    <li><a href="#">Staff</a></li>
                    <li  id="broker"><a href="~/Home/broker">broker</a></li>
                    <li><a href="#">Sale</a></li>
                </ul>
</div>

我在google上尝试以下操作之后,我必须在菜单中的每个页面上设置活动类,

<script>
    $(document).ready(function () {
        $('#home').addClass('active');
    });
</script>

但上面的问题是我设置默认选择的主菜单.然后它总是被选中.还有其他方法吗？,或者我可以概括和保持我的js在布局文件本身？

执行应用程序后,我的菜单看起来 –

点击其他菜单项后,我得到以下结果 –

我在Index视图和broker视图中添加了以下脚本—

<script>
        $(document).ready(function () {
            $('#home').addClass('active');
        });
    </script>

 <script>
        $(document).ready(function () {
            $('#broker').addClass('active');
        });
    </script>

分别.

解决方法

这是一个解决方法.尝试

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="demo"><a href="~/Home/demo">broker</a></li>
    <li id='sale'><a href="#">Sale</a></li>
  </ul>
</div>

并在每个页面上添加js

$(document).ready(function () {
  $(".nav li").removeClass("active");//this will remove the active class from  
                                     //prevIoUsly active menu item 
  $('#home').addClass('active');
  //for demo
  //$('#demo').addClass('active');
  //for sale 
  //$('#sale').addClass('active');
});

原文地址：https://www.jb51.cc/css/217126.html