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

JavaScript - Identifying Repetitive Items in an Array

My goal is difficult to explain in words, but I can show you with code. Here is the array I am working with: var array = [{name:"John",lastname:"Doe"},{name:"Alex",lastname:"Bill"},{name:"John",lastname:"Doe"}] This array has duplicate elements, and I n ...

javascriptangularjs

The Chrome Extension XHR always gets a 403 response except when it is triggered from the file:/// protocol

My current project involves the development of a Chrome Extension that relies on the fixer.io API for accessing currency exchange rates. To test this extension, I typically use a simple HTML page where I embed my JavaScript using <script> tags. When ...

javascriptajaxgoogle-chromegoogle-chrome-extensionhttp-status-code-403

Form submission button gets stuck after AJAX request is made

Hey there, I'm currently working on a form that utilizes Ajax for making a post in Rails 4. The JavaScript in the form includes some validation checks and is supposed to display an alert message upon successful posting. However, I'm facing an iss ...

javascriptjqueryajaxforms

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

javascriptjqueryhtml

Heroku Internal Server Error with NextJs version 5.0.0

Below are the scripts that I am using: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js", "heroku-postbuild": "next build" }, This is the content of my procfile: web: npm start ...

javascriptreactjsherokudeploymentnext.js

Encountering a challenge while attempting to adjust the navigation bar at the top as the user scrolls through the page

I've been working on making the navigation bar stay fixed at the top of the page when the user scrolls, but I'm running into some issues. It seems that certain elements are overlapping the navigation bar, causing them to hide the navigation bar a ...

jqueryhtmlcss

The JQuery video player's full screen toggle feature is not correctly assigning the class name

I've been tackling a bug in my JavaScript/jQuery video player that has left me stumped. One of the key features of this player is an enter/exit full-screen button located at the bottom of the HTML snippet: (function($) { /* Helper functions */ ...

javascriptjqueryvideohtml5-video

No data received from AJAX response

I've spent around 8 hours trying to figure this out with no success. Using $.ajax, I am trying to retrieve data from my database through a PHP script. However, it seems like it's not working in this particular case and I have no idea why. The va ...

javascriptphpjqueryajax

Evaluation of Google Closure Library's performance

When researching the performance of JavaScript libraries, I come across numerous websites that compare the speed of popular libraries including: jQuery (known for being slow) Prototype (especially sluggish in IE) Dojo (considered the fastest when it come ...

javascriptjqueryperformancedojogoogle-closure-library

Extracting data from the web using PHP

I'm facing an issue with my code that scrapes data from a website. The current output looks like this: Agriculture Food Apparel I want to only display the first/nth category, for example just "Agriculture". I attempted: echo $sub_title[1].&ap ...

phphtmlarraysweb-scrapingdomdocument

basic two-column design

Located at the end of this page, you will find two distinct columns. On the right side, there is a Twitter feed, while the left side showcases a YouTube video and a comments section. Below is the HTML and CSS code that was used to create these columns: .l ...

htmlcsscss-float

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...

javascriptnode.jsexpressbackendejs

Exploring the depths of a multidimensional dictionary within AngularJS

I am currently working on a project using AngularJS. The data I have is in the form of JSON: { "leagues":{ "aLeague":{ "country":"aCountry", "matchs":{ "aUniqueID1":{ "date":"2014-09-07 13:00:00", "guest_play ...

javascriptjsonangularjs

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

javascriptjqueryhtml

Could jQuery and CSS be utilized for image enlargement?

Is it possible for jQuery (or CSS!) to detect an area around the mouse when hovering over an image, capture the image underneath, and then zoom in on that area? This concept differs from typical jQuery zoom effects where there are two separate images - sm ...

jquerycss

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

javascripthtmlasp.netvb.netvisual-studio

Retrieve the URL action and return it as a JSON object within the MVC framework

After my controller method returns a JSON object with a URL formed as shown below: return Json(new { url = Url.Action("ShowContact", "Customer", new { vm = contactVM }) }, JsonRequestBehavior.AllowGet); I am encountering an issue in the success code of m ...

jqueryajaxjsonasp.net-mvc-5

python Chromium process leak initiated by requests-html

My program is experiencing a crash due to a memory leak before it can complete the loop. The script I am using: from requests_html import HTMLSession from bs4 import BeautifulSoup import requests for x in range(9376, 23534): session = HTMLSession() ...

pythonhtmlpython-3.xchromiumpython-requests-html

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

Looking to enhance MUI DataGrid's functionality by adding custom event listeners like rowDragStart or rowDragOver? Unfortunately, DataGrid doesn't have predefined props for these specific events. To learn more, check out the official documentati ...

javascriptreactjstypescriptmaterial-ui