如何从 Twitter 引导程序将活动类设置为导航菜单 [英] how to set active class to nav menu from twitter bootstrap

问题描述

我是 twitter bootstrap 的新手.使用那里的导航菜单.我正在尝试将活动类设置为选定的菜单.我的菜单是 -

<ul class="nav"><li id="home" class="active"><a href="~/Home/Index">首页</a></li><li><a href="#">项目</a></li><li><a href="#">客户</a></li><li><a href="#">员工</a></li><li id="broker"><a href="~/Home/Broker">Broker</a></li><li><a href="#">销售</a></li>

我在谷歌搜索之后尝试了以下内容，我必须从菜单中的每个页面上设置活动类，例如--

但上面的问题是我设置了默认选择的主菜单.然后它总是被选中.还有其他方法可以做到这一点吗?，或者我可以概括并将我的 js 保留在布局文件本身中?

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

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

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

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

分别.

解决方案

这是一种解决方法.试试

<ul class="nav"><li id="home" class="active"><a href="~/Home/Index">首页</a></li><li><a href="#">项目</a></li><li><a href="#">客户</a></li><li><a href="#">员工</a></li><li id="demo"><a href="~/Home/demo">经纪人</a></li><li id='sale'><a href="#">Sale</a></li>

并在每个页面上js添加

$(document).ready(function () {$(".nav li").removeClass("active");//这将从中删除活动类//以前活动的菜单项$('#home').addClass('active');//用于演示//$('#demo').addClass('active');//出售//$('#sale').addClass('active');});

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>

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-

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>

respectively.

解决方案

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>

and on each page 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');
});

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