16

我有一个 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 将具有 class 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。

那么有没有办法解决这个问题呢？

4

13 回答 13

32

您正在绑定您单击错误的元素，您应该将其绑定到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();
    });
});
于 2013-07-31T16:39:20.060 回答
10

我正在使用引导导航

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

$(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');
    });
于 2016-06-12T18:40:30.763 回答
4

我以前也有同样的问题。在这里试试这个答案，它适用于我的网站。

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

资料来源：最初在这里发布如何从 twitter bootstrap 将活动类设置为导航菜单

于 2016-02-03T09:56:02.667 回答
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>

于 2020-08-18T13:05:35.550 回答
2

如果您更改类并在同一函数中加载内容，您应该没问题。

$(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();
    });
});
于 2013-07-31T16:43:08.623 回答
2 
<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

于 2016-10-07T13:10:10.160 回答
0

您可以使用 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);
}

注意：确保您已根据您的要求实施。我已经根据我的实现编写了这个脚本，并且它对我来说工作正常。

于 2016-11-21T20:30:34.333 回答
0 

<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

于 2019-11-15T22:30:42.177 回答
0

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

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

于 2016-01-17T17:45:24.093 回答
0

这会成功的

 $(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');
        }
    });
于 2019-06-18T16:05:46.187 回答
0 

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

于 2020-03-13T06:46:34.257 回答
0 
$(".nav li").click(function() {
    if ($(".nav li").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});

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

于 2016-11-21T05:39:00.500 回答
0

在我的情况下的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);
}
于 2019-10-12T14:42:03.097 回答