Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows:

<ul class="product">
    <li><a href="#myanmar" class="active">Myanmar</a></li>
    <li><a href="#madagascar">Madagascar</a></li>
    <li><a href="#usa">United States of America</a></li>
    <li><a href="#ethiopia">Ethiopia</a></li>
    <li><a href="#brazil">Brazil</a></li>
    <li><a href="#australia">Australia</a></li>
    <li><a href="#china">China</a></li>
    <li><a href="#kenya">Kenya</a></li>
    <li><a href="#canada">Canada</a></li>
</ul>
javascriptjqueryhtmlcssonclick

Answer №1

Expanding on David's response, here is a suggestion for what you should do: Start by checking if the link you are about to click already has the 'active' class to prevent any flickering (assuming that you will be navigating to different divs, either with animation or without).

$('ul.product a').click(function(){
       if(!$(this).hasClass("active")){
                 $(".active").removeClass("active");
                 $(this).addClass("active");
        }else{
            return false;//this prevents flicker
       }
 });

Answer №2

Consider giving this a shot:

$('ul.product a').on('click', function(){
    $('ul.product a').removeClass("active");
    $(this).addClass("active");
});

Check it out on JSFiddle: http://jsfiddle.net/s8nky/

Answer №3

verification : http://jsfiddle.net/en2LT/

experiment with this...click the link to see the active class being added and removed.

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

Enhance the functionality of your website by implementing a zoom feature

I am looking to dynamically change the CSS of a div using jQuery when it is clicked. The challenge I am facing is that there are multiple divs with the same class and I am unable to modify their classes as they are created dynamically using PHP. <div ...

jqueryhtmlcss

Modify the ngb-timepicker formatting to output a string instead of an object

I am currently working on modifying ngb-timepicker so that it returns a string instead of an object. Right now, it is returning the following format: { "hour": 13, "minute": 30 } However, I want it to return in this format: "13:30" This is the HTM ...

javascriptangulartypescriptbootstrap-4

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

Verify if an item is already present in the HTML document before adding a new item to it using Ajax

I am working on a page that displays a list of new students with the option to accept or reject them. The list can be updated in two ways - by manually refreshing the page, or through an Ajax method that automatically updates the list when a new student re ...

jqueryhtmlajaxasp.net-mvc

Unusual case of missing lines while reading a file using readline.createInterface()

const readline = require('readline') const fs = require('fs/promises'); (async function() { await fs.writeFile('/tmp/input.txt', [...Array(100000).keys()].join('\n')) await fs.writeFile('/tmp/other.tx ...

javascriptnode.jsreadline

Using Django to make an AJAX call on a Bootstrap dropdown menu

Issue: I'm struggling to find a solution to load the entire chart HTML into a div by calling a function from views.py and passing the context to reference_page.html without having to refresh the page. I have a chart similar to a stock chart, with a d ...

jquerydjangopython-3.xajaxdjango-templates

Using JavaScript to generate JSON data in a plain text format rather than using HTML

I have a snippet of code that retrieves the user's location every 5 seconds. <div id="geo" onLoad=""></div> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPo ...

javascriptphpjson

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

htmlangularsass

What is the process for verifying an email address using the deep-email-validator package from npm?

I'm looking to verify the existence of an email address used for registration on my website, ensuring it's not just a temporary one. How can I achieve this utilizing the npm deep-email-validator package? Within my HTML page, I've assigned n ...

javascriptnode.jsnpmemail-validation

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

javascriptangulartypescript

AngularJS directive does not trigger when switching tabs or scrolling pages

I came across a solution to display a placeholder image before the real image fully loads while browsing online here. I implemented the code provided in the accepted answer on my page, where I have two tabs using `ion-slide-box` for tab selection. Each tab ...

javascripthtmlangularjs

Unable to start store from localStorage during App initialization

Having trouble setting up my Vuex store with the logged-in user's account details from localStorage. I've looked at numerous Auth examples in Nuxt, but none explain how to retrieve an authToken from localStorage on the client side for subsequent ...

javascriptvue.jsvuex

The process of incorporating a function into a website's source code using a web driver

In the source code, there is a button with an onclick event to change the paragraph content. However, the code provided does not seem to be functioning properly. ((JavascriptExecutor) this) .executeScript("function test123() { y=docume ...

javascriptseleniumselenium-webdriver

Setting initial values for an object in JavaScript

I am currently seeking a method to store predefined values in a separate file for populating my function: Here is my function in index.js: const Modes = (array) => { return { name: array.name, funcionarioIncrease: array.funcio ...

javascriptjson

Scroll up event and sticky header using jQuery

I'm working on a function $(document).ready(function () { var lastScroll = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if ((lastScroll - st) == 5) { $("header").css("position", "fixed"); ...

javascriptjquery

Encoding a two-dimensional array into JSON format

In my PHP script, I am querying a database and formatting the results as JSON: $query = mysql_query($sql); $rows = mysql_num_rows($query); $data['course_num']=$rows; $data['course_data'] = array(); while ($fetch = mysql_fetch_assoc($q ...

phpjavascriptjquery

Tips for setting up my bot to pull random messages from a channel and send one when an autoresponse is activated

As per the headline, I attempted to utilize fetchMessages in order to monitor the messages being sent in a specific channel. However, when I experimented with this method, it simply generated never-ending blocks of data in the console. Upon inspection, I ...

javascriptnode.jsdiscorddiscord.js

How can I locate a div element using multiple class names?

<div class="value test" /> I am trying to locate this specific element on the web page which has two classes assigned to it. Since className does not accept space-separated values, I am exploring alternative ways to achieve this. Any suggestions? ...

javacssseleniumselenium-webdriver

Tips for creating a countdown timer from scratch without relying on a plugin

Looking at this image, it is clear that jQuery can be used. However, I am wondering if there is a way to create a countdown timer without relying on plugins. Can anyone offer some guidance? ...

javascriptjquerytimercountdown

Pause and continue scrolling through the page with the push of a button

I have a question about a simple demo. I am looking to prevent scrolling when button1 is clicked, and then resume scrolling when button2 is clicked. Can someone guide me on how to achieve this? Check out the Fiddle here HTML: <input type='button& ...

javascriptjqueryhtml