如何从twitter bootstrap将活动类设置为导航菜单

Question

我是twitter引导程序的新手.使用导航菜单.我正在尝试将活动类设置为所选菜单.我的菜单是 -

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

谷歌搜索后我试着跟踪东西,我必须从菜单中设置每个页面上的活动类,如as--

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

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

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

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

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

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

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

分别.

Answer 1

您可以使用此JavaScript\jQuery代码:

// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

它会将<a>父级<li>和<li>父级设置<ul>为活动状态.

有效的简单解决方案!

原始来源:

Bootstrap将活动类添加到li

Answer 2

这是一种解决方法.尝试

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

Answer 3

我遇到了同样的问题……通过将下面显示的代码添加到每个页面页脚中的“ functions.js”文件的“ $（document）.ready”部分中，解决了该问题。很简单 它获取所显示页面的完整当前URL，并将其与完整的定位href URL进行比较。如果它们相同，则将锚点（li）父级设置为活动。并且仅当anchor href值不是“＃”时才执行此操作，然后引导程序将解决该问题。

$(document).ready(function () {         
    $(function(){
        var current_page_URL = location.href;

        $( "a" ).each(function() {

            if ($(this).attr("href") !== "#") {

                var target_URL = $(this).prop("href");

                    if (target_URL == current_page_URL) {
                        $('nav a').parents('li, ul').removeClass('active');
                        $(this).parent('li').addClass('active');

                        return false;
                    }
            }
        }); }); });