Add class name to element outside current container-CodePudding

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

Example code:

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

<div >
     <div  id="nav-1">
         <p>Lorem Ipsum</p>
     </div>
     <div  id="nav-2">
          <p>Lorem Ipsum</p>
     </div>
     <div  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 > with the id="nav-1. Is that possible?

CodePudding user response：

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 >
    <li >
       <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
     </li>
     <li >
        <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
     </li>
     <li >
        <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
     </li>
</ul>

<div >
     <div  id="nav-1">
         <p>Lorem Ipsum</p>
     </div>
     <div  id="nav-2">
          <p>Lorem Ipsum</p>
     </div>
     <div  id="nav-3">
           <p>Lorem Ipsum</p>
     </div>
</div>

CodePudding user response：

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 >
    <li >
       <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
     </li>
     <li >
        <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
     </li>
     <li >
        <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
     </li>
</ul>

<div >
     <div  id="nav-1">
         <p>Lorem Ipsum</p>
     </div>
     <div  id="nav-2">
          <p>Lorem Ipsum</p>
     </div>
     <div  id="nav-3">
           <p>Lorem Ipsum</p>
     </div>
</div>

CodePudding user response：

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 >
        <li >
           <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
         </li>
         <li >
            <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
         </li>
         <li >
            <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
         </li>
    </ul>
    
    <div >
         <div  id="nav-1">
             <p>Lorem Ipsum 1</p>
         </div>
         <div  id="nav-2">
              <p>Lorem Ipsum 2</p>
         </div>
         <div  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>