根據單擊將串列錨點設定為活動狀態

我有以下清單：

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

但兩者都不起作用。

這是我可以為導航鏈接找到的 .active 類。我只能訪問，min.css所以很難找到（不確定這是否足夠）

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

我無法添加active到該li元素，因為它似乎不適用于我正在使用的 Bootstrap 模板。

我該如何解決這個問題？

uj5u.com熱心網友回復：

您的代碼運行良好，除了樣式，

只需嘗試強制使用樣式!important覆寫默認引導程式樣式

見下面的片段：

$('.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/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

每次將函式設定為事件的偵聽器時，當它觸發時，它會將事件物件傳遞給函式，您只需使用它即可知道用戶單擊了哪個元素：

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

標籤：javascript html 查询 css bootstrap-5

上一篇：Vue3CompositionAPI狀態在使用函式時不會更新

下一篇：如何使用javascript在物件中查找特定型別的長度？