Punched using .hasClass() , but as it turned out will not work:

.hasClass('active') - if it contains a class, the function will return true , otherwise it will return false. .toggleClass('active', ) - true - if a class is added, false - otherwise.

 $(function () { $('a[href^="#"]').click(function() { $(this).toggleClass('active', $(this).hasClass('active')); return false; }); });

Question: how to make the addition of a class as short as possible to the link you clicked on and then delete from its class if you clicked on another link?

1 answer 1

I don’t know if it’s as short as possible, but the working version:

 $("div").on("click", "a", function(e) { e.preventDefault(); $("div a").removeClass("active"); $(e.target).addClass("active"); }); 
 a, a:active, a:visited { color: black; text-decoration: none; } a.active { color: blue; font-weight: bold; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a href="#1">test 1</a> <a href="#2">test 2</a> <a href="#3">test 3</a> <a href="#4">test 4</a> <a href="#5">test 5</a> </div>

JSFiddle example