首页 文章

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

提问于
浏览 次
23

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

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

但上面的问题是我设置了默认选择的主菜单 . 然后它总是被选中 . Is there any other way to do this ? , or which i can generalize and keep my js in layout file itself?

执行应用程序后我的菜单看起来 -
enter image description here

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

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

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

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

分别 .

javascript jquery css twitter-bootstrap menu

12 回答

  • 68

    这是一种解决方法 . 尝试

    <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');
});
    回复于
  • 0

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

    回复于
  • 1

    我有同样的问题...通过将下面显示的代码添加到我的“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;
                    }
            }
        }); }); });
    回复于
  • 0

    您可以在每个页面的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类添加到正确的导航项 .

    回复于
  • 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');
            });
    回复于
  • 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
    回复于
  • -1
    (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>
    回复于
  • 0
    $( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

    看一下这个 .

    回复于
  • 0

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

    $('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });
    回复于
  • 0

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

});
    回复于
  • 18

    我正在使用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>
    回复于
  • 1

    我刚刚在名为 target-active 的ul部分添加了一个自定义类

    <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代码以获得所需的结果

    1 st链接页面

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

    2和链接页面

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

    3 rd链接页面

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

    4链接页面

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

相关问题