Question

我是 twitter 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>

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

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

但上面的问题是我设置了默认选择的主菜单。然后它总是被选中。 还有其他办法吗？，或者我可以概括并将我的js保存在布局文件中？

执行申请后我的菜单看起来 - enter image description here

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

我在索引视图和代理视图---

上添加了以下脚本

<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 add active class to 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>

并在每个页面上添加

$(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进行比较。如果它们相同，则将anchor（li）parent设置为活动状态。并且仅当锚点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;
                    }
            }
        }); }); });

Answer 4

您可以在每个页面的BODY标记上添加不同的类，例如在主页上你可以有这个：

<body class="nav-1-on">

然后这个css：

.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
     // set your styles here
}

资产净值要素：

<ul>
  <li class="nav-1"><a href="#">Home</a></li>
  <li class="nav-2"><a href="#">Services</a></li>
  <li class="nav-3"><a href="#">About</a></li>
  <li class="nav-4"><a href="#">Contact</a></li>
</ul>

＃

或者你可以在每个页面上的BODY上放置一个类，然后通过jQuery获取它，并根据该标记将.active类添加到正确的导航项。

Answer 5

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

然后为每个页面添加以下内容：

//家

 $(document).ready(function () {
        $('.home').addClass('active');
    });

//项目页面

$(document).ready(function () {
            $('.Project').addClass('active');
        });

//客户页面

 $(document).ready(function () {
                $('.Customer').addClass('active');
            });

//员工页面

 $(document).ready(function () {
                $('.Staff').addClass('active');
            });

Answer 6

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

$('ul.nav>li.home>a').click();  // first. same to all the other options changing the li class name

Answer 7

(function (window) {
bs3Utils = {}
bs3Utils.nav = {
    activeTab: function (tabId) {
        /// <summary>
        /// 设置需要展现的tab
        /// </summary>
        /// <param name="tabId"></param>
        $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
    }
}
window.bs3Utils = bs3Utils;
})(window);

示例：

var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
            bs3Utils.nav.activeTab(_actvieTab);
                        <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
                        </li>
                        <li>
                            <a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
                        </li>

                    </ul>

Answer 8

$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

检查一下。

Answer 9

对于单页网站，菜单项只是跳到页面的其他部分，这个简单的解决方案适合我：

$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });

Answer 10

对于单页网站，以下是我使用的内容。它不仅根据点击的内容设置活动元素，还会在初始页面加载时检查URL位置中的哈希值。

$(document).ready(function () {

    var removeActive = function() {
        $( "nav a" ).parents( "li, ul" ).removeClass("active");
    };

    $( ".nav li" ).click(function() {
        removeActive();
        $(this).addClass( "active" );
    });

    removeActive();
    $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );

});

Answer 11

我正在使用Flask Bootstrap。我的解决方案有点简单，因为我的模板已经从Flask接收选项或选项作为参数。

var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";

第一行，js代码获取元素。因此，您应该使用id标识每个元素。我将在下面展示一个例子。第二行，您将该类添加为活动状态。你可以在下面看到html ID。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
        <li>
            <a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
                <h2>Speed</h2>
            </a>
        </li>
        <li>
            <a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
                <h2>Life</h2>
            </a>
        </li>
    </ul>
</div>

Answer 12

对于使用Codeigniter的用户，请将其添加到侧边栏菜单下方，

<script>
    $(document).ready(function () {
        $(".nav li").removeClass("active");
        var currentUrl = "<?php  echo current_url();  ?>";
        $('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
    });
</script>

Answer 13

I just added a custom class to the ul section named target-active

<ul class="nav navbar-nav target-active">
    <li><a href="/">HOME</a></li>
    <li><a href="find-truck">FIND A TRUCK</a></li>
    <li><a href="our-service">OUR SERVICES</a></li>
    <li><a href="about-us">ABOUT US</a></li>
</ul>

If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.

Add simple one line jquery code to each page to get your desired result

1st link page

$(function(){
    $(".target-active").find("[href='/']").parent().addClass("active");
});

2nd link page

$(function(){
    $(".target-active").find("[href=find-truck]").parent().addClass("active");
});

3rd link page

$(function(){
    $(".target-active").find("[href=our-service]").parent().addClass("active");
});

4th link page

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});

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

13 个答案:

1st link page

2nd link page

3rd link page

4th link page