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

IT技术 javascript jquery html twitter-bootstrap
2021-02-25 07:36:57

我有一个 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 中的活动类。

我认为这可以在 中实现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。

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

6个回答

您正在绑定您单击错误的元素，您应该将其绑定到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();
    });
});
@TankyWoo 这里也是一样。
2021-04-21 07:36:57
但是当我单击该链接时，preventDefault 不会加载该页面。
2021-05-01 07:36:57
@Karl-AndréGagnon ..他想说的是该类显示为活动状态但内容未显示...比如说，链接 2 显示为活动状态，但链接 2 的内容未显示...
2021-05-05 07:36:57
有点不清楚你在问什么。点击后你不加载带有javascript的页面吗？如果不是，您应该使用 javascript 来完成您的要求，但是您的服务器端语言。
2021-05-13 07:36:57

我正在使用引导程序导航

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

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

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

$(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 引导程序将活动类设置为导航菜单

伙计们试试这是这个问题的完美答案：

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

像魅力一样工作。谢谢
2021-04-21 07:36:57

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

$(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 的内容。
2021-04-28 07:36:57
这个在我的情况下有效。需要删除 event.preventDefault(); 我正在使用 jquery +meteorJS。
2021-04-28 07:36:57
其它你可能感兴趣的问题
上一篇如何将元素的每个单词包装在 span 标签中？ 下一篇在 Mobile Safari 下拉列表项选择框上使用“下一步”时，选择/下拉的 onchange() JS 事件的奇怪行为