向当前容器外的元素添加类名

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。我希望能够将类名active添加到带有id="nav-1的<div class="tab-pane">中。这有可能吗？

Answer 1

​

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 2

我猜您的意思是在页面加载时，您希望在.nav-item元素中找到带有类is-active的.nav-item元素，并使用其data-bs-target属性将active类添加到与data-bs-target中的selctor匹配的.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>

​