Alter the color of the text within the `<li>` element when it is clicked on

Here is a list of variables and functions:

<ul id="list">
<li id="g_commondata" value="g_commondata.html">
    <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : g_commondata</a>
</li>
<li id="gs_data" value="gs_data.html">
    <a onclick="setPictureFileName(document.getElementById('gs_data').getAttribute('value'))">Variable : gs_data</a>
</li>
<li id="leak" value="leak.html">
    <a onclick="setPictureFileName(document.getElementById('leak').getAttribute('value'))">Variable : leak</a>
</li>
<li id="Dfun1" value="Dfun1.html">
    <a onclick="setPictureFileName(document.getElementById('Dfun1').getAttribute('value'))">Function : Dfun1</a>
</li>
<li id="main" value="main.html">
    <a onclick="setPictureFileName(document.getElementById('main').getAttribute('value'))">Function : main</a>
</li>
<li id="Afun1" value="Afun1.html">
    <a onclick="setPictureFileName(document.getElementById('Afun1').getAttribute('value'))">Function : Afun1</a>
</li>
<li id="Afun2" value="Afun2.html">
    <a onclick="setPictureFileName(document.getElementById('Afun2').getAttribute('value'))">Function : Afun2</a>
</li>
<li id="Afun3" value="Afun3.html">
    <a onclick="setPictureFileName(document.getElementById('Afun3').getAttribute('value'))">Function : Afun3</a>
</li>
<li id="Afun4" value="Afun4.html">
    <a onclick="setPictureFileName(document.getElementById('Afun4').getAttribute('value'))">Function : Afun4</a>
</li>
</ul>

Is it possible to dynamically change the color of the selected item while running?

Answer №1

Have you tried this solution?

CSS:

.text_color {color:blue}//Select your preferred color

JQUERY:

$('#list li').click(function(){
     $(this).parent().find('li.text_color').removeClass('text_color');
     $(this).addClass('text_color');
    });

Answer №2

To achieve this in pure vanilla JavaScript:

<li id="g_commondata" value="g_commondata.html">
    <a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value')); this.parentNode.style.color = '#FF0000';">Variable : g_commondata</a>
</li>

The same approach can be applied to all <LI> elements. It is recommended that you explore and incorporate a JavaScript library like jQuery, Prototype, or MooTools into your development work.

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

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

Is there a way to maintain image proportions when resizing the window?

I'm in the process of developing a classroom-themed website with interactive overlaying images. The goal is to have various pictures that users can click on to access different resources from different websites. My main challenge right now is getting ...

Interested in building an album app using Django Tastypie and Backbone?

I'm currently working on developing a new album application using django, with two essential django models: class Album(models.Model): name = models.CharField(max_length=100) family = models.ForeignKey(FamilyProfile) created_by = models.F ...

Tips for patiently anticipating an object to undergo asynchronous modifications?

I have an array containing items, and I need to incorporate the asynchronous value from getProductMinQuantity. The issue I'm facing is that the response with res.status(200)... gets sent before modifying item.order_quantity_minimum. I had assumed us ...

Fetching the added information using ajax

Hey everyone, I have a question about reloading the appended data on my page. The page has infinite scrolling functionality and I want to reload the elements that are added when a particular element is clicked. The loading works fine for elements that were ...

The argument in question has not been defined

Experimenting with AngularJS, I encountered an error message in the browser console when trying to display a particular example: Error: Argument 'mainController as mainCtrl' is not a function, got undefined at Error (native) at bb My pr ...

Scrolling back to the top of the page using Jquery instead of a specific div

Check out the code for my project here. The isotope feature is functioning correctly, however, when clicking on the image, instead of scrolling to the navigation under the red box as intended, the page scrolls all the way to the top. If I modify the follo ...

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...

Having trouble with the link attribute not functioning properly for a radio button in Chrome?

<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...

Express server is receiving undefined post parameters from Axios in Vue, even though they are clearly defined in Vue

Within my code, I am utilizing an <img> element as shown below: <img v-bind:word = "thing" @click="action" align="center" src="../assets/pic.png"/> Alongside, there is a method structured in this manner: ...

Issue with plain CSS animation not functioning in NextJS with Tailwind CSS

I found this amazing animation that I'm trying to implement from this link. After moving some of the animation code to Tailwind for a React Component, I noticed that it works perfectly in Storybook but fails to animate when running in next dev. It si ...

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

Drop-Menu - Tubular Formation of Columns

I am currently facing a challenge in creating a filter on a web page using Bootstrap's drop-down menu. The issue lies in placing the filters in columns side by side, as they are stacking up instead. The filter menu is generated dynamically by looping ...

Creating a navigation menu that uses images to simulate borders instead of using traditional border styling in CSS

My goal is to create a menu with a design like this: | one | two | three | four| Through CSS and borders, it's possible to achieve a similar look by: .myContainer > ul > li{ border-right: 1px solid purple; } .myContainer > ul > li ...

How can you deactivate the vue-router for specific routes? Is it possible to operate a single-page application backend while utilizing a non-single-page

I'm currently working on a website/webapp using Laravel 5.3 and Vue 2. Since SEO is crucial, I've decided to keep the frontend/crawlable part of the site in Laravel + Blade, with only minimal sections in Vue 2.0. This way, I can avoid using Ajax ...

Contact Form featuring a Text Area to complete the rest of the details

I am currently working on creating a contact form that has a design similar to the one shown below. However, I am facing challenges in getting the desired layout. I initially tried using flex-box but encountered issues with displaying the Text Area correct ...

Guide to automatically inserting text into an html form and submitting it without manual intervention

Currently, I am in the process of a project where my main goal is to design an HTML form for submitting replies. One interesting feature I want to include is an option for users who are feeling lazy to simply click on "auto-generate comment", which will ...

Exploring the power of $j in JavaScript

Could someone please explain what the $J signifies in this snippet of javascript code? if ($J('.searchView.federatedView.hidden').attr('style') === 'display: block;' || $J('.searchView.federatedView.shown').length ...

Tips for consuming a REST API to retrieve JSON data and assign it to a variable for use in React JS

I'm currently working on developing a shopping application using React.js. I found inspiration from a sample application on https://codepen.io/paulkim/pen/oZLavq , and now I am looking to fetch product information from an API call. I have attempted to ...

Hidden content from Vue router view

My goal is to have the navigation pane overlaying the content of the page, but instead, it is being appended to the bottom where the end of the navigation drawer would be. I've experimented with different variations to display data using navigation dr ...