What methods are available for updating the href color of an element using the DOM?

I am looking to update the color of a tab (Mathematics-tab) based on the value of 'aria-selected' changing to true in Bootstrap. I have multiple tabs, including one for mathematics, and I want to visually differentiate between selected and unselected tabs. However, since Bootstrap uses jQuery, and I am not familiar with it, I am struggling to achieve this. Additionally, my JavaScript code is not functioning as expected.

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>

javascripthtmlcssbootstrap-4

Answer №1

I am looking to differentiate between a tab that is selected and one that is not

To achieve this in Bootstrap, you can utilize the .active class to indicate which element is currently active. Simply add the following CSS based on your existing classes:

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

See the demo below:

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

Answer №2

Is this the desired outcome?

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>

Answer №3

I am looking to modify the color of a specific tab (Mathematics-tab) to a different color (not using .style.color = gold), when the 'aria-selected' attribute from bootstrap is true.

Instead of JavaScript, you can achieve this by utilizing a CSS attribute selector 

.nav-link[aria-selected="true"]
to change the color.

Here is an example:

.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 only want to target the Mathematics tab, you can use 

#Mathematics-tab[aria-selected="true"]
to focus on the element's ID instead of the nav-link class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

Can I be detected for using text expanders or copying and pasting text into a form before submitting it?

As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...

htmlsecurityuser-interface

Show a mpld3 graph in an HTML page using the Django framework

Incorporating mpld3 to showcase matplotlib charts within an HTML page through django has been my recent focus. I utilize the mpld3.fig_to_dict method to convert a matplotlib figure into a JSON string and store it in a variable. However, I am encountering ...

javascriptpythonjsondjangomatplotlib

Issue with Trix text editor not triggering the change event

Lately, I've been facing some difficulties in getting the tirx-change event to trigger when there are changes in the content of a trix-editor. Despite using React JS for the view, I haven't been able to identify the problem. Below is the code sni ...

javascripthtmleventsreactjsrich-text-editor

Modifying data within a pre-set framework

Let's take a look at a basic setup for the task at hand: In the HTML Side test.html <div id="app"> <my-comp temp="1" cat="{ name:'Geoff', age:3 }"></my-comp> </div> Transitioning to the Vue Side app.js: impo ...

htmlvue.js

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

javascriptjqueryhtmlcss

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Tips for implementing Vue in production mode with vue.esm-bundler.js

Currently, I am utilizing Vue 3 with webpack and loading it using vue.esm-bundler.js due to the presence of in-dom templates. The documentation mentions that when using a bundler, you need to "Leaves prod/dev branches with process.env.NODE_ENV guards (mus ...

javascriptnode.jsvue.jswebpackvuejs3

Whenever the state of a React component is modified, it does not automatically trigger a re

Currently, I am utilizing the React Infinite Scroller library to display a list of posts. Interestingly, my load more results function seems to be triggered three times, resulting in the update occurring thrice (verified through console.log). For renderi ...

javascriptreactjsstateuse-state

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

htmljson

How can I assign a default value for a multiple select dropdown list in AngularJS?

I am currently facing an issue with my multiselect dropdown. The code for the dropdown is as follows: <select id="year" multiple ng-model="type" ng-disabled="!type1" > <option value="all" selected>all</option>; <option value= ...

javascripthtmlangularjs

Issues encountered when passing JavaScript object to PHP

I'm attempting to transmit my JavaScript object to PHP using JSON.stringify() JavaScript: $('#save').on('click touch', function(){ obj = { "1" : { "1" : "hey", "2" : "hay" }, ...

javascriptphpjsonajaxobject

Revert the Vue State When Navigating Back in the Browser

Background In our checkout process, we redirect to Stripe after creating an order object through an API request. To prevent users from clicking the "checkout" button multiple times during this process, we toggle a variable value to show a loading icon whe ...

javascriptvue.jsinertiajslaravel-jetstream

Displaying Images on top of Images with React/Javascript/NextJS

I have two images. Let's say image 1 is a thumbnail for news content. I would like to overlay a promotional PNG banner on top of this image and create a new output image. This output image will be used as the OG (Open Graph) image. How can I achieve t ...

javascriptreactjsimagenext.jsfacebook-opengraph

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

javascripthtmlcsswordpresselementor

Switch ng-model in Angular to something different

I am looking to transform my own tag into a template <div><input .../><strong>text</strong></div> My goal is to have the same values in both inputs. Check out the plunker here If I change the scope from scope: {value:' ...

javascripthtmlangularjs

Unsynchronized AJAX POST requests fail to function effectively

I am encountering an issue with an AJAX call that I am using to log in a user. Here is the code: function loginUser() { var xmlhttp; if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest() ...

javascriptajaxpostasynchronous

Using Double Equal in a JavaScript For Loop

I'm struggling to comprehend why utilizing a double equals (or even a triple equals) in the condition of a for loop doesn't function as expected. Consider this example: for (i = 1; i == 5; i++){ console.log(i) } When I replace == with <= ...

javascript

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

javascriptjqueryhtml

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

javascriptjqueryhtmlcssaccessibility