CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
github292929
github292929

Reputation: 185

How can I use the DOM to change the href color of an element?

I want to change a tab (Mathematic-tab)to a different href color (so I can't put .style.color = gold), when the value of 'aria-selected' from bootstrap becomes true. I currently have tabs of which mathematics tab is one and essentially I want to distinguish between a selected and unselected tab, but I'm not sure how as bootstrap uses Jquery which I don't know. My JS also doesn't work.

let mathsTab = document.getElementById('Mathematics-tab');
if (mathsTab.getAttribute('aria-selected') == "true") {
    console.log("true");
   // mathsTab.style.color = #f0a500;
} else {
   // mathsTab.style.color = #1A1C20;
};
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
     <li class="nav-item" role="presentation">
       <a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
     </li>
     <li class="nav-item" role="presentation">
       <a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
    </li>
     <li class="nav-item" role="presentation">
       <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
     </li>
     <li class="nav-item" role="presentation">
       <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
     </li>
</ul>

Upvotes: 0

Views: 91

Answers (3)

Jon P
Jon P

Reputation: 19772

I want to distinguish between a selected and unselected tab

Bootstrap uses the .active class to denote which element is active. Based on your existing classes just add the following CSS:

#myTab .gold-text.active {
  color : gold;
}

Demo:

#myTab .gold-text.active {
  color : gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
  </li>
</ul>

Upvotes: 2

MT0
MT0

Reputation: 168041

I want to change a tab (Mathematic-tab)to a different href color (so I can't put .style.color = gold), when the value of 'aria-selected' from bootstrap becomes true.

You don't need to use JavaScript; instead you can do it using a CSS attribute selector .nav-link[aria-selected="true"] to set the color.

Like this:

.nav-link[aria-selected="true"] {
  color: gold;
}
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
 <li class="nav-item" role="presentation">
   <a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
 </li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
 </li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
 </li>
</ul>

If you want to restrict it to just the Mathematics tab then you can use #Mathematics-tab[aria-selected="true"] to filter on the element's ID rather than the nav-link class.

Upvotes: 1

Osman Durdag
Osman Durdag

Reputation: 955

Did you mean like that ?

let navItems = document.querySelectorAll('.nav-link');
  navItems.forEach(item =>{
    item.addEventListener("click", () => {
      item.style.color = "#f0a500";
      navItems.forEach(otherItem => {
        if(otherItem !== item){
          otherItem.style.color = "#1A1C20";
        }
      });
    })
  })
<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
 <li class="nav-item" role="presentation">
   <a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
 </li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
 </li>
 <li class="nav-item" role="presentation">
   <a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
 </li>
</ul>

Upvotes: 1

Related Questions