Javascript 如何从twitter引导将活动类设置为nav菜单_Javascript_Jquery_Css_Twitter Bootstrap_Menu

Javascript 如何从twitter引导将活动类设置为nav菜单

javascript jquery css twitter-bootstrap menu

Javascript 如何从twitter引导将活动类设置为nav菜单,javascript,jquery,css,twitter-bootstrap,menu,Javascript,Jquery,Css,Twitter Bootstrap,Menu,我是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&

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

在谷歌搜索之后，我试着在每个页面上设置活动类，如下所示--


$（文档）.ready（函数（）{
$（'#home'）.addClass（'active'）；
});

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

执行应用程序后，我的菜单显示-

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

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


$（文档）.ready（函数（）{
$（'#home'）.addClass（'active'）；
});
$（文档）.ready（函数（）{
$（'#broker'）.addClass（'active'）；
});

这是一个解决办法。试一试

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

您可以在每页的BODY标签上添加不同的类，例如，在主页上，您可以有以下内容：

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

导航要素：

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

# 或者，您可以在每个页面的主体上放置一个类，然后通过jQuery获取该类，并根据该标记将.active类添加到正确的nav项中

<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 () {
            $('.Project').addClass('active');
        });

//客户页面

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

//员工页面

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

您可以使用以下

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

它将设置


（功能（窗口）{
bs3Utils={}
bs3Utils.nav={
activeTab：函数（tabId）{
/// 
/// 设置需要展现的标签
/// 
/// 
$（'.nav tabs a[href=“#”+tabId+''“]”）.tab（'show'）；
}
}
window.bs3Utils=bs3Utils；
})（窗口）；

例如：
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>

var\u actvieTab=\u type=='0'？'portlet_tab2_1'：'portlet_tab2_2'；
bs3Utils.nav.activeTab（_actvieTab）；






我刚刚在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>

第二链接页
第三链接页
第四链接页
我也有同样的问题。。。通过将下面显示的代码添加到“$（document）.ready”文件中解决了这个问题，该文件是我的“functions.js”文件的一部分，包含在每个页脚中。这很简单。它获取显示页面的完整当前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;
                    }
            }
        }); }); });

看看这个
 
<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 









$（'ul.nav>li.home>a'）。单击（）；//第一。更改li类名的所有其他选项相同
对于菜单项直接跳到页面其他部分的单页网站，这个简单的解决方案适合我：
$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });

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

});

我正在使用烧瓶引导。
我的解决方案稍微简单一点，因为我的模板已经从Flask接收到选项或选项作为参数

var choice=document.getElementById（“{item_kind}”）；
choice.className+=“活动”对于使用Codeigniter的用户，请将其添加到侧边栏菜单下方
<script>
    $(document).ready(function () {
        $(".nav li").removeClass("active");
        var currentUrl = "<?php  echo current_url();  ?>";
        $('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
    });
</script>


$（文档）.ready（函数（）{
$（“.nav li”）.removeClass（“活动”）；
var currentUrl=“”；
$（'a[href=“”+currentUrl+“]”）。父项（'li，ul'）。addClass（'active'）；
});
对于要复制javascript的每个页面？例如，您正在执行的Sale
页面$（“#Sale”）.addClass（'active'）？你能发布一个测试页面或一个JSFIDLE吗？@dakait:是的，我在菜单中的每个网页上都写了js。我建议在每个页面上添加导航栏，但要使页面处于活动状态，而不是主页。谢谢dakait。它解决了我的问题。但问题是，我必须在每个网页上编写脚本，如果我的网页增加，那么很难维护。有没有其他方法可以概括脚本并保持布局，或者可以使用任何css属性来实现这一点？@Priyanka我昨天也遇到过同样的情况，我使用localStorage解决了这个问题，这也是一种解决方法，但我不必在每个页面上都编写js。原因是页面被重新加载，我从localStorage
检索单击的li
的id并对其应用类。如果我找到更好的解决方案，我会更新答案。。。另外，您可以将答案标记为正确，因为它解决了您的问题。：P
您也可以这样添加st:$（'nav a'）。parents（'li，ul'）。removeClass（'active'）如果需要，自动删除任何剩余的“活动”这对我不起作用，所以我很想知道我做错了什么。我的应用程序使用web表单，我把它放在母版页文件的标题部分。这是一个很好的解决方案，可以很好地处理下拉列表。我尝试了数千种其他的解决方案，但这是迄今为止最好的最简单和最好的解决方案。太棒了！
<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>

$(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");
});

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

$(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;
                    }
            }
        }); }); });

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

<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 

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

$(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" );

});

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