30

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

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

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

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

执行应用程序后，我的菜单看起来 - 在此处输入图像描述

单击其他菜单项后，我得到以下结果- 在此处输入图像描述

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

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

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

分别。

4

13 回答 13

81

您可以使用以下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

于 2014-09-07T00:16:05.183 回答
29

这是一种解决方法。尝试

<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');
});
于 2013-02-26T06:36:34.820 回答
5

我有同样的问题......通过将下面显示的代码添加到我的“functions.js”文件的“$（document）.ready”部分来解决它，该文件包含在每个页脚中。这很简单。它获取显示页面的完整当前 URL，并将其与完整的锚点 href URL 进行比较。如果它们相同，则将锚 (li) 父级设置为活动。并且仅当锚点 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;
                    }
            }
        }); }); });
于 2015-11-27T23:59:06.157 回答
2

对于菜单项直接跳到页面其他部分的单页网站，这个简单的解决方案对我有用：

$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });
于 2017-02-04T23:44:08.270 回答
1

您可以在每个页面上的 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 类添加到基于该标签的正确导航项中。

于 2013-02-26T15:28:38.037 回答
1 
<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');
            });
于 2014-07-13T16:11:52.233 回答
1 
<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
于 2016-08-16T17:32:14.500 回答
1

对于单页网站，以下是我使用的。它不仅根据点击的内容设置活动元素，而且还在初始页面加载时检查 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" );

});
于 2017-06-18T04:38:08.700 回答
1

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

<script>
    $(document).ready(function () {
        $(".nav li").removeClass("active");
        var currentUrl = "<?php  echo current_url();  ?>";
        $('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
    });
</script>
于 2019-10-22T03:57:29.113 回答
0 
(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>
于 2015-06-18T01:39:35.970 回答
0 
$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

看一下这个。

于 2016-08-05T11:10:58.537 回答
0

我正在使用 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>

于 2017-07-16T14:11:12.363 回答
-1

我刚刚在名为 ul 的部分中添加了一个自定义类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>

如果每个 li 标签点击从不同的地方或相同的地方获取新页面，则无需添加 jquery removeClass 功能。

将简单的一行 jquery 代码添加到每个页面以获得您想要的结果

第一个链接页面

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

第二个链接页面

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

第三个链接页面

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

第4个链接页面

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});
于 2015-10-06T08:16:08.333 回答