將類名添加到當前容器外的元素

Question

如何根據id和/或 BS 屬性在當前容器之外添加類名？

示例代碼：

<ul class="nav">
    <li class="nav-item is-active">
       <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
     </li>
     <li class="nav-item">
        <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
     </li>
     <li class="nav-item">
        <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
     </li>
</ul>

<div class="tab-content">
     <div class="tab-pane" id="nav-1">
         <p>Lorem Ipsum</p>
     </div>
     <div class="tab-pane" id="nav-2">
          <p>Lorem Ipsum</p>
     </div>
     <div class="tab-pane" id="nav-3">
           <p>Lorem Ipsum</p>
     </div>
</div>

以第一個li為例。 它具有is-active類，它a屬性#nav-1 。 我希望能夠使用id="nav-1向<div class="tab-pane">添加一個active的類名。這可能嗎？

Answer 1

為了讓您能夠點擊 a 的任何元素，您必須首先以 $("a[data-bs-target|='#nav']") 的形式調用該元素的點擊事件.on('click', function(event){}) 然后通過this.getAttribute('data-bs-target') 獲取data-bs-target 屬性並獲取每個元素的值最后刪除所有想要的類和添加的那個元素

    <style>
    .active {
    color: orange;
    font-weight: bold;
    border: 1px solid orange;
}
</style>
<ul class="nav">
        <li class="nav-item is-active">
           <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
         </li>
         <li class="nav-item">
            <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
         </li>
         <li class="nav-item">
            <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
         </li>
    </ul>
    
    <div class="tab-content">
         <div class="tab-pane" id="nav-1">
             <p>Lorem Ipsum 1</p>
         </div>
         <div class="tab-pane" id="nav-2">
              <p>Lorem Ipsum 2</p>
         </div>
         <div class="tab-pane" id="nav-3">
               <p>Lorem Ipsum 3</p>
         </div>
    </div>
<script>
            $("a[data-bs-target|='#nav']").on('click',function(event){
               event.preventDefault();
               var attributeValue = this.getAttribute('data-bs-target');
               $('.tab-pane').removeClass('active');
               $(attributeValue).addClass('active');
            });

    </script>

Answer 2

 var activeEl = document.querySelectorAll(".is-active")[0]; //Get active li element var dataset = activeEl.querySelectorAll(":scope > a")[0].dataset; //Get data attributes from child a element var div = document.getElementById(dataset.bsTarget.replace("#", "")); //Cut # from data-bs-target and get the tab-pane element by id div.classList.add("mystyle"); //Add class

 .mystyle{ background: #000000; color: #FFFFFF; }

 <ul class="nav"> <li class="nav-item is-active"> <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="nav-1"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-2"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-3"> <p>Lorem Ipsum</p> </div> </div>

Answer 3

我猜你的意思是在頁面加載時，你想在.nav-item元素中找到a元素active並使用它的data-bs-target屬性添加is-active類到與data-bs-target中的選擇器匹配的.tab-pane中。

如果是這樣，您可以使用document.querySelector(".nav-item.is-active a")找到該元素，然后獲取它的data-bs-target屬性，因為這是一個有效的 CSS 選擇器，所以使用它來查找相關tab-pane元素並添加類名。

const a = document.querySelector(".nav-item.is-active a");
const selector = a?.getAttribute("data-bs-target");
if (selector) {
   document.querySelector(selector)?.classList.add("active");
}

請注意那里的可選鏈接 ( ?. )，因此如果.nav-item.is-active不匹配或者其data-bs-target屬性中的選擇器不匹配，則不會出現錯誤。

現場示例：

 const a = document.querySelector(".nav-item.is-active a"); const selector = a?.getAttribute("data-bs-target"); console.log(selector); if (selector) { document.querySelector(selector)?.classList.add("active"); }

 .active { color: orange; font-weight: bold; border: 1px solid orange; }

 <ul class="nav"> <li class="nav-item is-active"> <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="nav-1"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-2"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-3"> <p>Lorem Ipsum</p> </div> </div>