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?

javascripthtmlcss

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

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

javascriptjqueryhtmlcssangularjs

Tips for Positioning a Page Layout in the Center Using HTML and CSS

I'm a beginner in HTML and CSS and I'm trying to create a simple webpage layout from scratch. I want all the elements of the page (nav, header, section, footer, etc.) to be centered while still keeping the nav bar on the left side. I've set ...

htmlcss

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

The occurrence of TypeError in next.js Dropzone stating that (0 , _mantine_core__WEBPACK_IMPORTED_MODULE_0__.rem) is not a function is indicating

I am encountering an issue while trying to render a dropzone component using Next.js and Mantine. For reference, I am following the documentation at . Here is the import statement: import dropzone I am receiving an error message that says: I have inclu ...

javascriptreactjsnext.jsmantine

Steps to disable all fields if the previous field is set to its default value and the default value is currently selected

As a newcomer to AngularJS, I have successfully disabled fields based on previous field selections. However, my goal is to set the default value of "ALL" for all fields (country, state, city). If the country value is set to "ALL," then the state and city ...

htmlangularjs

Could a class method be accessed from outside a nested handler method in JavaScript?

I am trying to make an XMLHttpRequest to a server using JavaScript. In the handler function, I need to call a method from the surrounding class. Is there a way to achieve this? Understanding how this works in JavaScript can be confusing. I have experiment ...

javascriptajaxxmlhttprequest

Modify MUI's ListItemText component by targeting a specific span to implement customized styles using the useStyle hook

It's quite perplexing that although this is a straightforward task in regular CSS, it must be accomplished through MUI's useStyles for some peculiar reason. Essentially, I possess a ListItem containing a ListItemText. It appears as follows: cons ...

javascriptcssreactjsmaterial-ui

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

javascripttypescriptprismaself-referenceself-referencing-table

Creating a hover effect on a specific area of a map is a useful technique

Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...

htmlcssdictionaryhoverarea

Enhancing security in client-server communication using HTML5 Ajax

Thank you for your assistance today. I am currently in the process of developing an HTML5 game and require guidance on the most effective method for Client Server communications. I am exploring alternatives to socket.io for undisclosed reasons. The key p ...

jqueryajaxjsonhtml

Tips for creating a horizontal bar with CSS using the float property

Looking to create a horizontal scroll layout using CSS and floats? Here's my attempt, but I'm not getting the desired result. Flexbox isn't an option as it needs to be supported on IE. Take a look at my code and point out where I might have ...

htmlcss

Guide to making control bar fade out when video is paused on video.js

Is there a way for the control bar to automatically disappear when the video is paused? Thank you in advance! ...

javascriptcsscontrolsvideo.js

Having trouble dynamically assigning the ng-model attribute

I am trying to populate the ArrayINeed array, which is the object I need to pass back to the API call. Currently, I am getting undefined for "ConfirmedTrackingReferenceNumbers": Dc.ArrayINeed. Despite researching various posts online and on SO, I have been ...

javascriptangularjs

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...

cssreactjsnavigation

Utilizing Angular to augment existing items in local storage

Hey everyone, I'm facing an issue with localStorage that I can't seem to figure out. I have a form where the first step collects name and gender, and the second step asks for weight and height. The data from step 1 is saved in localStorage, but ...

javascriptangular

What are the advantages of using history.push or another method from react-router-dom compared to simply assigning the path to window.location.pathname?

When I need to navigate within my code, I find it more convenient to simply assign the desired path to window.location.pathname. Can this approach have any drawbacks? ...

javascriptreactjsreact-router-dom

The JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

A method to deactivate a button cell after it has been clicked within a for loop

I am struggling with correctly disabling a button in my React code when it is clicked. I attempted to pass in an array and handle the button click, but it consistently results in errors. This task seems more complicated than it should be. How can I ensure ...

javascriptreactjs

Utilize images stored locally in ReactJS

My path to the image is: ../src/assets/images/img_name.jpg" And my path to the file.js is: src/file_name.js If I include the following code in file.js: Import img_name from "../src/assets/images/img_name.jpg" Then reference the image pa ...

javascriptreactjsimage

Craft dynamic SVG components using TypeScript

Looking to generate a correctly formatted SVG element using TypeScript: createSVGElement(tag) { return document.createElementNS("http://www.w3.org/2000/svg", tag); } Encountering an issue with tslint: Error message: 'Forbidden http url in str ...

javascriptsvgtypescripttslint