如何设置活动类到nav菜单从twitter bootstrap [英] how to set active class to nav menu from twitter bootstrap

问题描述

我是第一次使用 twitter bootstrap 。使用导航菜单。我试图设置活动类到所选菜单。
我的菜单是 -

I'm new to the twitter bootstrap. Using there navigation menus . I'm trying to set active class to selected menu. my menu is -

<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>

我试过下面的东西后，googling这个，我必须设置活动类在每个页面上从菜单as -

I tried following thing after googling on this that i have to set active class on each page from menu like as--

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

但是上面的问题是我设置默认选择的主菜单。然后它总是得到选择。 有没有其他方法来做到这一点？

but problem for above is that i set home menu selected by default. Then it always get selected. Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?

执行应用程序后，我的菜单看起来是 -

After executing application my menu looks -

点击其他菜单项后，我得到以下结果 -

after clicking on other menu item i get following result-

我在索引视图和Broker视图上添加了以下脚本---

And i added following scripts on Index view and Broker view ---

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

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

。

推荐答案

这是一种解决方法。 try

it is a workaround. try

<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 add

$(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');
});

这篇关于如何设置活动类到nav菜单从twitter bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！