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

Store the advertisement click into the database utilizing PHP, subsequently access the provided hyperlink

I am developing a custom WordPress widget that displays advertisements. I want to track clicks on these ads and store the data in a database. The database table for click tracking is already set up, and I have a function called f1_add_advert_click($advert ...

javascriptphpwordpress

Show schedule in an HTML chart

I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below: The table itself is quite simple, but I am having trouble figuring out how to effectively display the timeline ...

jqueryhtmlcss

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

Selecting and Uploading Multiple Files in Internet Explorer (less than version 9)

I have been struggling with selecting and uploading multiple files at once to the server. Here is the code I am currently using: <html> <body> <form action="upload.php" method="post" enctype="multipart/form-data" name="myForm"> <l ...

phpjavascripthtmlfile-upload

Higher Order Component for JSX element - displaying JSX with wrapped component

I am looking to utilize a ReactJS HOC in order to implement a tooltip around JSX content. The function call should look similar to this: withTooltip(JSX, "very nice") To achieve this, I have created the following function: import React from "re ...

javascriptreactjsjsx

Difficulty comprehending the response from an AJAX post is being experienced

I'm currently working on a website and facing an issue connecting JavaScript with PHP using AJAX. Specifically, I'm struggling with reading the AJAX response. My PHP script contains the following code: <?php echo "1"; In addition, I have a ...

javascriptphpajax

Incorporate AJAX functionality with a simple HTML button

Upon clicking the button, the AJAX call fails to execute. Below is the HTML code for the buttons: <td><button id=${data[i].id} name="update" type="button" value="${data[i].id}" class="btn btn-primary update" ...

javascripthtmljqueryajax

Post Request to Express API does not produce any output

Today, I encountered an issue while trying to create a JWT authentication API in Express. When I send a POST request with Postman, it only returns {}. Below is the code for server.js: const express = require("express"); const mongoose = require("mongoos ...

javascriptrestapiexpresspostman

What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of

My goal is to receive a JSON raw response from R Plumber and then utilize it in Angular. However, I am encountering an issue where the JavaScript Framework is interpreting it as a string instead of recognizing it as JSON format. "[{\"id&bsol ...

javascriptrplumber

What methods can be used to ensure the document in mongoose is not deleted by updating the expires property on the createdAt field?

I have implemented account verification in this app and created a user account that is set to delete itself after 30 seconds if not verified. createdAt: { type: Date, default: Date.now, index: { expires: 30, }, }, However, I am now searching f ...

javascriptnode.jsmongodbexpressmongoose

Instead of the typical Three.js pointer lock first person controls, how about experimenting with orbit

I'm struggling to understand why my controls are causing the camera to orbit around a fixed point instead of behaving like a first-person shooter game. After comparing my code to an example in the three.js documentation, I am aiming to replicate the ...

javascriptthree.js

Local host's attempt to retrieve data from an external site via an Axios GET request was rejected

I'm currently attempting to execute a GET request on an external website in order to scrape some information. Unfortunately, my axios GET request is returning a connection error. I suspect that this issue may be related to the fact that I am sending t ...

javascripthttpexpressaxios

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...

jqueryhtmlcss

Mapping an array in ReactJS based on the specific order of another array

In my experience with Unmitigated, the answer proved beneficial. If you're arriving from a Google search, please scroll down for more information. Order: [ "567", "645", "852", "645", "852", "852 ...

javascripthtmlreactjsarraysreact-hooks

Stop flexbox list items from altering the width of their parent container when the children are hovered over

In my project, I am dealing with a series of list items where some have child lists containing sub navigation links. To create a hover effect using CSS, I set display: none on the child <ul> and then change it to display: block when hovering over the ...

htmlcssflexboxcss-position

the object '[object Object]' of a distinct supporting nature

I encountered an error stating "ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." This is my TypeScript file: this.list = data.json(); ...

javascriptangular

What strategies can be implemented to avoid PHP timeouts when running loops, without adjusting the max_execution_time setting?

I am facing a challenge with a folder full of documents that need to be processed by a PHP script. There are around 1000 documents in the folder, and each one needs to be deleted after processing. Is there a way to efficiently run or restart a PHP script ...

phpjavascriptajaxjquery

The PHP form is failing to successfully submit due to a custom error message occurring

I'm having trouble with my PHP form submission. Every time I try to submit, I receive a custom error message that says "Oops there was a problem. Please try again." Any assistance would be greatly appreciated. As a newcomer to PHP, I suspect that som ...

phphtml

I have a Three.js Group containing five elements, but I am having trouble accessing the meshes within. Is there a way to properly access the meshes within a Three.js group?

https://i.sstatic.net/cfznC.png I am encountering an issue while trying to access elements within this array. Despite there being a length of 5, the code returns "undefined" and has a length of 0. The image above shows the output of this code. console.log ...

javascriptthree.js

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascriptjavajqueryhtmlselenium