如何在使用 jquery 的引导程序中单击另一个链接时更改活动类？答案

【问题标题】：How to change active class while click to another link in bootstrap use jquery?如何在使用 jquery 的引导程序中单击另一个链接时更改活动类？
【发布时间】：2013-08-01 07:20:10
【问题描述】：

我有一个 html 作为侧边栏，并使用 Bootstrap。

<ul class="nav nav-list">
    <li class="active"><a href="/">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
    <li><a href="/link3">Link 3</a></li>
</ul>

我想做点事：

当我click链接3这样的链接时，page content将变为链接3的内容，链接3将有active类，并删除链接1中的活动clss。

我认为这可以在jQuery中实现，并且我在SO中搜索了很多问题，例如：

我使用这个脚本：

$(document).ready(function () {
    $('.nav li').click(function(e) {

        $('.nav li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

但他们中的大多数使用preventDefault，这将阻止继续操作。所以不能改成Link 3的页面内容。

如果我删除 preventDefault 语句，当页面加载链接 3 的内容时，活动类将返回链接 1。

那么有什么办法可以解决这个问题吗？

【问题讨论】：

为什么要删除preventDefault()？它将执行preventDefault()之后编写的代码，不用担心。
@DKM ，是的，我已经删除了preventDefault()，但这会加载链接 3，并且活动将返回链接 1。
在每个链接后添加一个哈希 (/#link1) 并通过 javascript 读取它，然后在代码中设置条件。它会解决你的问题。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

你在绑定你点击了错误的元素，你应该把它绑定到a。

您要阻止li 上发生默认事件，但li 没有默认行为，a 有。

试试这个：

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

【讨论】：

但是当我点击链接时，页面不会按preventDefault加载。
有点不清楚你在问什么。点击后你不是用javascript加载页面吗？如果不是，你应该使用 javascript 来做你所要求的，但你的服务器端语言。
@TankyWoo 也一样。
@Karl-AndréGagnon ..他想说的是该课程显示为活动但内容未显示...例如，链接 2 显示为活动但链接 2 的内容是不显示...

【解决方案2】：

我正在使用引导导航

这为我完成了这项工作，包括活跃的主下拉菜单和活跃的孩子

$(document).ready(function () {
        var url = window.location;
    // Will only work if string in href matches with location
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });

【讨论】：

【解决方案3】：

我之前也遇到过同样的问题。在这里试试这个答案，它适用于我的网站。

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

来源：原贴在这里how to set active class to nav menu from twitter bootstrap

【讨论】：

【解决方案4】：

大家试试，这是这个问题的完美答案：

<script>
    $(function(){
        $('.nav li a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
        $('.nav li a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
        })
    })
    </script>

【讨论】：

工作就像一个魅力。谢谢
这只有在我点击链接时才能正常工作。但是当我返回一页时，active 类仍保留在上一个链接中。如何避免？

【解决方案5】：

如果你改变类并且在同一个函数中加载内容你应该没问题。

$(document).ready(function(){
    $('.nav li').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');

        //Load the content
        //e.g.
        //load the page that the link was pointing to
        //$('#content').load($(this).find(a).attr('href'));      

        event.preventDefault();
    });
});

【讨论】：

我已经测试过了，但它只会将活动类更改为 Link 3，但不会加载 Link3 的内容。
这个对我有用。需要删除 event.preventDefault();我正在使用 jquery + meteorJS。

【解决方案6】：

<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

【讨论】：

【解决方案7】：

如果您使用像 Java 这样的服务器端代码，那么您需要返回活动选项卡名称，并且在返回页面上有一些功能可以禁用（意味着删除活动类）除您返回的选项卡之外的所有选项卡。

这需要您向每个选项卡添加 id 或名称。多一点工作:)

【讨论】：

【解决方案8】：

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

这就是我想出的。它检查“li”元素是否具有活动类，如果没有，则跳过删除类部分。我参加聚会有点晚了，但希望这会有所帮助。 :)

【讨论】：

【解决方案9】：

您可以使用 cookie 将回发数据从一个页面保存到另一个页面。在花了很多时间之后，我终于能够做到这一点。我正在向你建议我的答案（这是完全有效的，因为我也需要这个）。

首先将您的 li 标签赋予有效的 id 名称，例如

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

然后复制并粘贴此脚本。因为我已经编写了一些用于读取、删除和创建 cookie 的 javascript。

 $('.nav li a').click(function (e) {
  
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());
       
        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

注意：确保您已根据您的要求实施。我已经根据我的实现编写了这个脚本，它对我来说很好。

【讨论】：

【解决方案10】：

这样就可以了

 $(document).ready(function () {
        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }
    });

【讨论】：

【解决方案11】：

在我的例子中是html代码

<ul class="navs">
   <li  id="tab1"><a href="index-2.html">home</a></li>
   <li id="tab2"><a href="about.html">about</a></li>

   <li id="tab3"><a href="project-02.html">Products</a></li>

   <li id="tab4"><a href="contact.html">contact</a></li>
 </ul>

而js代码是

  $('.navs li a').click(function (e) {
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());

        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

【讨论】：

【解决方案12】：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });
    
    This works perfectly

【讨论】：

【解决方案13】：

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

【讨论】：