Switch up the background image of the <li> element when the <a> tag is clicked

html:

 <ul>
    <li id="Co" class="libgc" ><b>CO</b></li>
    <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li>
 </ul>

css:

.libgc {
background-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background-image: url(../images/pcnav.png);
border: 1px solid #CCC;
}

jquery:

 $("li").click(function(){
    $(this).css('background-image', 'url("images/btnSelectedTab.png")');
    $(this).css('color','black');
  });

 });

Issue: Changing the background image of one link persists even when clicking on another link. How can we reset the background image to its original state when clicking on a different link?

jqueryhtmlcssanchorbackground-image

Answer №1

Give this a shot

$("li").on("click", function(){
    $("li").removeClass("active");
    $(this).addClass("active");
  });

Here is the CSS for the newly active class:

li.active {
   background-image: url(../images/btnSelectedTab.png);
   color: black;
}

Answer №2

Design a style for the active li tag as you desire, then apply the following code:

$('li').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

This action will only impact list items within the corresponding ul tag.

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 CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss

css determining the width through calculation

I am facing a challenge with a math problem. My content box is 700 pixels wide, and my hentry (inside content) is 100% wide with padding of 10 pixels. This causes the hentry to be wider than the content, resulting in an overflow... Does anyone have a so ...

csswordpress

Import HTML document into a Bootstrap Popup

Currently, I am working on creating a modal that loads content dynamically. Below is the JavaScript code I have been using for this task: function track(id,title) { $('#listenTrack').modal('show'); $('#listenTrack').f ...

javascriptjqueryajaxbootstrap-modal

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

javascriptjqueryhtmlcss

Troubleshooting: Difficulty parsing data due to missing special characters

https://i.stack.imgur.com/SWOgr.png When attempting to access a table similar to the one shown above through ajax, I am encountering an issue where certain characters (such as ' and ") are not displaying. Why is this happening? Below is the code sni ...

jqueryjsonspecial-characters

Changing the Displayed Content with a Simple Click of a Link

Layout Overview In the process of developing a tool to streamline work tasks, I want to ensure that I am following best practices. My goal is for the website to initially display only column A, with subsequent columns generated upon clicking links in the ...

javascriptjqueryhtmlcss

Trigger a function upon the addition of a class to a div element | Execute AnimatedNumber()

Is there a way to trigger a function when a specific div receives a certain class? I have an animated div that only appears when scrolling, and once it's visible, it gains the class "in-view". I want to execute a function every time this div has the ...

jqueryhtml

JavaScript encountered an issue: Uncaught ReferenceError - 'userNumber' is undefined at line 43

I'm currently working on a JavaScript guessing game where I've already set up the necessary functions. However, I keep encountering an error. An error in my JavaScript code is causing a ReferenceError: userNumber is not defined on line 43 to b ...

jqueryreferencejavascript

Leveraging the browser's console for transmitting AJAX data

I've created a PHP quiz page that uses AJAX to post answer data when a user clicks on an answer. If the answer is correct, the page then loads the next question using another AJAX function. Here's a snippet of the code: <ul class="choices"> ...

javascriptphpjqueryajax

Obtain the href attribute's value from an HTML document using Javascript

I'm facing an issue here. Currently, I am utilizing Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/) for my project. Now, my goal is to incorporate a Lightbox with multiple thumbnails inside the dropout provide ...

javascriptjqueryhtmlfetch

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

Simplified user interface for detecting radio button clicks

Currently working on a form that includes radio buttons, where an update function is triggered whenever there is a user input change. The challenge I am facing is how to incorporate user-friendly radio buttons with a larger button area encompassing both t ...

javascripthtmlcss

Error message: The requested resource could not be loaded due to a server error (status code 500) when using

I have been struggling to identify the exact issue with my code, despite referencing previous questions on the topic. function viewcalldetails(obj) { alert("clicked"); var id = $(obj).attr("id"); $(".style-t ...

javascriptc#jqueryasp.netajax

Column 1 with fixed headers

Is there a way to make sticky headings in a single column scroll without them overlapping? Currently, my h1s are overlapping when I scroll down. Update: I would like the headings to stack on top of each other as I scroll, instead of being pushed off scree ...

cssbootstrap-5

JavaScript generated form fails to submit

I am currently facing an issue with submitting form data to a PHP file when it is generated using JavaScript. I am unsure of how to resolve this problem. The form submission works fine on a test .html file by itself, but not when it is generated by JavaScr ...

javascriptphpjqueryhtmlforms

Using a Jinja 'for' loop to create nested 'If' statements

I'm attempting to include an if statement within a loop for a jinja template: </table> <class="container"> <table border ="1"> <caption> BBOXX <caption> <thead class="thead-inverse"> <tr> <th& ...

pythonhtmlfor-loopif-statementjinja2

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless

dispatch email display Twitter Bootstrap notification utilizing Ajax

I'm trying to set up an email sending feature via a contact form. I want it to send the email and display a Bootstrap alert confirming that the email has been sent. Below is the HTML code: https://jsfiddle.net/6rfeas35/. Additionally, here is my PHP c ...

javascriptphpjqueryajaxtwitter-bootstrap

How can information be seamlessly transferred between two HTML pages using a script?

For my listview, I need to pass values like "name", "info", "hap", "lat," and "lon" to page2.html. What is the best way to achieve this? In PHP, I typically use POST or GET methods, but is there a more efficient approach? If using GET is recommended, how ...

javascriptjqueryjquery-mobilecordova

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

javascriptphpjqueryhtml