jQuery I want to add an active class to the linked ID of an anchor tag

Question

I've written an alphabet navigation program- I have anchor linked linked to h4 tags. When I click the a-tag, I want the element with the matching ID to have a class of active. When you click another anchor tag, it removes the class of active and assigns it to another element. Here's what I have so far:

<ul class="no-bullet inline">
            <li><a class="scroller" href="#a"><strong>A</strong></a></li>
            <li><a class="scroller" href="#b"><strong>B</strong></a></li>
            <li><a class="scroller" href="#c"><strong>C</strong></a></li>

          </ul>

<h4 class="alpha-heading" id="a"><strong>A</strong></h4>

<h4 class="alpha-heading" id="b"><strong>B</strong></h4>

<h4 class="alpha-heading" id="c"><strong>C</strong></h4>


$("scroller").on("click", function(){
function matchAlpha(){
var matchID = $(this).attr("href");
find.$(matchID).find.$(alpha-heading).removeClass("active");
find.$(matchID).find.$(this).$(alpha-heading).addClass("active");
}

});

Answer 1

Few things needs to fix in your code.

1. add . to scoller to look for class.
2. use .alpha-heading to remove active from previous active.You can even do .alpha-heading.active to be more specific
3. use matchID as id selector

 $(".scroller").on("click", function() { var matchID = $(this).attr("href"); //$('.alpha-heading').removeClass("active"); $('.alpha-heading.active').removeClass("active"); $(matchID).addClass("active"); }); 

 .active { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="no-bullet inline"> <li><a class="scroller" href="#a"><strong>A</strong></a></li> <li><a class="scroller" href="#b"><strong>B</strong></a></li> <li><a class="scroller" href="#c"><strong>C</strong></a></li> </ul> <h4 class="alpha-heading" id="a"><strong>A</strong></h4> <h4 class="alpha-heading" id="b"><strong>B</strong></h4> <h4 class="alpha-heading" id="c"><strong>C</strong></h4> 

Answer 2

First of all, you need to add missing . in the scroller and then use the href as selector to add active class for the clicked element. Below is the updated working version of your code:

 $(".scroller").on("click", function() { $('h4.alpha-heading').removeClass('active'); $($(this).attr('href')).addClass('active'); }); 

 .active { background: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="no-bullet inline"> <li><a class="scroller" href="#a"><strong>A</strong></a></li> <li><a class="scroller" href="#b"><strong>B</strong></a></li> <li><a class="scroller" href="#c"><strong>C</strong></a></li> </ul> <h4 class="alpha-heading" id="a"><strong>A</strong></h4> <h4 class="alpha-heading" id="b"><strong>B</strong></h4> <h4 class="alpha-heading" id="c"><strong>C</strong></h4> 

Answer 3

You can reduce your code to a single line in a click handler:

 $('.scroller').click(function() { $($(this).attr('href')).addClass('active').siblings().removeClass('active') }) 

 .active { background: #faa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="no-bullet inline"> <li><a class="scroller" href="#a"><strong>A</strong></a></li> <li><a class="scroller" href="#b"><strong>B</strong></a></li> <li><a class="scroller" href="#c"><strong>C</strong></a></li> </ul> <h4 class="alpha-heading" id="a"><strong>A</strong></h4> <h4 class="alpha-heading" id="b"><strong>B</strong></h4> <h4 class="alpha-heading" id="c"><strong>C</strong></h4> 

The way this works is as follows:

• $('.scroller').click(function() { : When clicking on a link with the scroller class
• $(this).attr('href') Get the href attribute
• Select it and add the active class to it with .addClass('active')
• The select all the siblings of that element and remove the active class with .siblings().removeClass('active')