keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy!

I'm looking to have each button change color when clicked, and stay that way until another link is clicked.

Here is the code I currently have:

HTML:

<ul class="tabnav-widget ui-tabs-nav">
   <li class="ui-tabs-selected">
      <a class="" href="#tab1-widget">written by</a>
   </li>
   <li>
      <a class="" href="#tab3-widget">Related Posts</a>
   </li>
   <li class="">
      <a class="" href="#tab4-widget">In this Category</a>
   </li>
</ul>

CSS:

.tabnav li a, .tabnav-widget li a{color:@white;}
.tabnav li:active, .tabnav-widget li:active{background:@white;}

In jQuery, I am unsure about the function I need to create in order to achieve my desired result. Any guidance would be appreciated.

Thank you in advance for any assistance provided.

jqueryhtmlcsscolors

Answer №1

JavaScript makes it achievable.

$(".tabnav-widget li a").click(function(){        
   if(!($(this).hasClass("active"))){
       $(".tabnav-widget li a.active").removeClass("active");
       $(this).addClass("active");
   }       
});

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

XMLHttpRequest Refusing to Send Data

This snippet of code is crucial for the custom extension: let url = "https://mywebsite.com/data.php"; function sendRequest() { var client = new XMLHttpRequest(); client.open("POST", url, true); client.setRequestHeader("Content-Type", "text/pla ...

javascriptjqueryajaxxmlhttprequest

Click to remove the ellipsis from the backbone

Some Background Info I am working on creating a feed similar to Twitter where each row expands on click to show more information. The data is fetched from a JSON file sent from the backend to the frontend, and I am using Backbone.js for rendering. My fee ...

javascriptjquerybackbone.jsunderscore.jsellipsis

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

A POST request to Ajax results in a bad request error code (400)

I am looking for assistance with an ajax call that is not working as expected. I'm having trouble understanding why this is happening. Could someone please review my code and provide some insight? It appears that the call is not reaching the control ...

jqueryajaxspring-mvc

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

htmlcssreactjstypescript

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

Uncertainties surrounding the use of JSON data versus a JavaScript object

As a newcomer to programming, I have ventured into Stack Overflow and W3schools to enhance my skills. Recently, I created a small project for educational purposes. One dilemma is bothering me - is the JSON file I generated actually in proper JSON format o ...

javascriptjsonajaxhtml

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Retrieve the information in a div element from an external website by utilizing AJAX

Exploring the world of AJAX is new to me, and I am eager to fetch content from a div on an external site and display it on my own website. Below is the current code snippet I have: <html> <head> <script src="https://ajax.googleapis.com ...

javascriptjqueryhtmlajax

What is the best way to incorporate server-side rendered content from a CMS to hydrate Vue.js?

Consider this scenario: content is managed through a traditional CMS such as Joomla or Drupal content is provided by the CMS as fully rendered HTML and CSS In the Frontend React.js should be utilized for all UI interactions. Despite going over most of R ...

javascripthtmlnode.jsvue.jsvuejs2

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Send the Entity's identification number to the Controller using Ajax

What is the most effective method for transmitting an object's identifier via ajax to the Server / Controller? For example, when we are on the page "book/edit/mybookname" and want to update the book entity "mybookname" using ajax. I have considered v ...

phpjqueryajaxsecurityparameter-passing

AJAX request: No values are being returned by $_GET

After spending hours trying to figure this out... I've been working on using AJAX to grab values from a jQuery slider within an <input> tag. The AJAX request is not failing (see code below), and when I use console.log to check the variable I&ap ...

javascriptphpjqueryajax

Can anyone point out where the mistake lies in my if statement code?

I've encountered an issue where I send a request to a page and upon receiving the response, which is a string, something goes wrong. Here is the code for the request : jQuery.ajax({ url:'../admin/parsers/check_address.php', meth ...

javascriptjqueryajaxrequestresponse

Implementing specific CSS styles for images that exceed a certain size limit

Currently, I am facing a dilemma as I work on developing a basic iPhone website that serves as a port for my blog. The main issue I am encountering is the need to add a border around images above a specific size and center them in order for the blog to hav ...

javascriptiphonecss

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

Extract information from page 1 to page 2 by utilizing ajax

Greetings, I am currently facing an issue with parsing data using the href get method to retrieve PHP by ajax on another page. Is this achievable? By the way, my framework of choice is CODEIGNITER. This is my HTML href code snippet: <a href="'.b ...

phpjqueryhtmlajax

Ways to activate javascript following a PHP submission?

It's a bit tricky to explain. function m(val){ var element=document.getElementById('othermethod'); if(val=='others') element.style.display='block'; else element.style.display=&apo ...

javascriptphphtml

JavaScript utilized to create a fully immersive full-screen webpage

I have been trying to implement a code for creating a full-screen website that works on all browsers. Unfortunately, my current code only seems to be functioning properly on Mozilla browser. When I try to view the site in Chrome and make it full screen, it ...

javascriptjqueryfullscreen

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui