Add class name to element outside current container

Question

How do I add a class name outside the current container, based on the id and/or the BS attribute?

Example code:

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

Take for example the first li . It has is-active class, its a has attribute #nav-1 . I want to be able to add a class name active to <div class="tab-pane"> with the id="nav-1 . Is that possible?

Answer 1

In order for you to be able to click on any of the elements of a, you must first call the click event of that element in the form of $("a[data-bs-target|='#nav']").on('click', function(event){}) and then get the data-bs-target Attribute through this.getAttribute('data-bs-target') and get the value of each element and finally delete all the desired classes and That element added

    <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

I'm going to guess that you mean that at page load, you'd like to find the a element inside the .nav-item element with the class is-active and, using its data-bs-target attribute, add the active class to the .tab-pane that matches the selctor in data-bs-target .

If so, you can find the element by using document.querySelector(".nav-item.is-active a") , then take its data-bs-target attribute and, since that's a valid CSS selector, use it to find the relevant tab-pane element and add the class name.

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

Notice the optional chaining ( ?. ) there, so you don't get an error if there's no match for .nav-item.is-active or there's no match for the selector in its data-bs-target attribute.

Live Example:

 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>