根据点击将列表锚点设置为活动答案

【问题标题】：Setting list anchor to active based on click根据点击将列表锚点设置为活动
【发布时间】：2022-01-26 08:28:05
【问题描述】：

我有以下清单：

<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
  <li class="nav-item">
    <a class="nav-link active" id="link1" href="{{ url_for('overview') }}">
      <i class="bi-list-check nav-icon"></i>Overview
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('upload') }}">
      <i class="bi-file-arrow-up nav-icon"></i> Upload file
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{{ url_for('choose_numeric') }}">
      <i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
    </a>
  </li>
</ul>

它以第一个列表元素为活动状态开始。我想根据单击的列表元素更改active 状态。

我试过了：

$('.steps-sampling').on('click','a', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

和（添加 id 到锚标签）

//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

但两者都不起作用。

这是我可以为 nav-link 找到的 .active 类。我只能访问min.css，所以很难找到（不确定这是否足够）

.nav-link.active{border-color:#006673}

我无法将active 添加到li 元素，因为它似乎不适用于我正在使用的引导模板。

我该如何解决这个问题？

【问题讨论】：

你能发布用于 .acrive 类的样式吗！
我在我的问题中添加了 css 活动类，不确定这是否正确/足够，搜索 min.css 并正确阅读有点困难。
@Zal 处理大多数情况总是比使用#id 更好。您使用漫游#id 做什么？我猜你可能可以引用 .active 类。
我同意，该 id 只是用于测试第二种解决方案，看看其他方法是否可行。 @zer00ne

标签： javascript html jquery css bootstrap-5

【解决方案1】：

你的代码运行良好，除了样式，

尝试使用!important 强制样式覆盖默认引导样式

参见下面的 sn-p ：

$('.steps-sampling').on('click','a', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

.active {
  color:green !important;
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
  <li class="nav-item">
    <a class="nav-link active" id="link1" href="#">
      <i class="bi-list-check nav-icon"></i>Overview
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi-file-arrow-up nav-icon"></i> Upload file
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
    </a>
  </li>
</ul>

【讨论】：

sn-p 确实有效，但在我的代码上使用它仍然不起作用，它可以工作 0.5 秒，然后返回第一个元素。我将.nav-link.active{ border-color:#006673 !important; } 添加到我的custom.css，它在bootstrap 主题之后加载。任何进一步的想法可能吗？或者我可以提供的任何其他信息？
我会尝试上传屏幕截图。谢谢
感谢您的帮助，如果您有兴趣，我找到了解决方案，请在下面查看我的回答

【解决方案2】：

每次您将函数设置为事件的侦听器时，当它触发时，它会将事件对象传递给函数，您可以使用它来了解用户单击了哪个元素：

$("a").click(function(evt){
    $("a").removeClass("active");
    $(evt.target).addClass("active");
});

我想建议一个更正确的方法，结果相同：

$("a").on("click", function(evt){
    $("a").removeClass("active");
    $(evt.target).addClass("active");
});

有时，根据您在绑定了事件的元素中放置的内容，evt.target 可以是与您绑定事件的元素不同的元素，因此您必须确保使用类设置样式的元素是正确一个：

$("a").on("click", function(evt){
    $("a").removeClass("active");

    let tgt=evt.target;
    if(!$(tgt).is("a")) tgt = $(tgt).closest("a");
    $(tgt).addClass("active");
});

【讨论】：

尝试了两种解决方案，不幸的是它们都不起作用。与上面的评论相同，看起来在 0.5 秒内我单击的链接上设置了活动状态，但它会返回到第一个元素。可能还有什么想法？
您肯定有另一个事件或其他代码正在恢复您的运行时更改，可能是 location 或其他一些 CSS 操作代码，如果没有看到您的代码，我们就无法判断。
我理解并同意，但我不确定如何提供完整的可重现示例，因为我认为这在我们的代码中涉及到相当多的部分。
感谢您的帮助，如果您有兴趣，我找到了解决方案，请在下面查看我的回答

【解决方案3】：

你可以试试这个代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.nav-item .nav-link {text-decoration : none;}
.nav-item .nav-link:hover{ border: 2px solid #006673 !important; }
.nav-item .nav-link.active{ border: 2px solid #006673 !important; }
</style>
<script>
$(document).ready(function(){
  $(document).on('click','.nav-link', function(){
     $('.nav-link').removeClass('active');
     $(this).addClass('active');
  });
});
</script>
</head>
<body>

<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
  <li class="nav-item">
    <a class="nav-link active" id="link1" href="#">
      <i class="bi-list-check nav-icon"></i>Overview
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi-file-arrow-up nav-icon"></i> Upload file
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
    </a>
  </li>
</ul>

</body>
</html>

【讨论】：

【解决方案4】：

在搜索其他解决方案后，我发现 this 有效。这与页面已刷新并在第一个元素上设置回活动状态有关：

    <script>
      $(document).ready(function() {
        $('a.active').removeClass('active');
        $('a[href="' + location.pathname + '"]').closest('a').addClass('active');
      });
    </script>

【讨论】：