Changing the "current" class of an element only works if the element has no href

user_5587369 0
Viewed 31

I'm trying to make a navigation bar that has some CSS code for the current tab and it only works for the elements that don't have a page to load.

This is my HTML code:

<ul class="nav-menu" id="nav-menu">
     <li>
         <a class="current" href="home">Home</a>
     </li>
     <li>
          <a href="cars">Cars</a>
     </li>
     <li>
          <a href="#">T&C</a>
     </li>
     <li>
          <a href="#">Prices</a>
     </li>
     <li>
          <a href="#">Services</a>
     </li>
     <li>
          <a href="#"">Contact</a>
     </li>
</ul>

And this is my jQuery code:

$('ul li a').click( function(){
     if ( $(this).hasClass('current') ) {
         $(this).removeClass('current');
     } else {
         $('li a.current').removeClass('current');
         $(this).addClass('current'); 
     }
});

As I mentioned above, for the last elements that have href="#" it works just fine, but when I press one that has a link, it just doesn't work.

Any suggestion is appreciated :)

uinavigationcontroller html jquery
2 Answers

It's not entirely clear what you meant, but I think you need to disable the default link click behavior with event.preventDefault().

Declare event as an argument in the click function. Like this:

$('ul li a').click( function(event){
...

And write event.preventDefault() at the very beginning of the function.

Here is the complete code:

$('ul li a').click( function(event){
    event.preventDefault();
     if ( $(this).hasClass('current') ) {
         $(this).removeClass('current');
     } else {
         $('li a.current').removeClass('current');
         $(this).addClass('current'); 
     }
});
user_135734440

When you click the href="home" or href="cars" ones, the browser follows the link, loading a completely new page. When you click ones that just have an anchor (href="#"), that's navigation within the page, so the page isn't reloaded.

To highlight those navigation entries when the home or cars page loads, you'll need to run code on those new pages that finds and highlights them once the DOM is loaded.¹

For instance, on the home page:

$("ul li a[href=home]").addClass("current");

¹ If you're targeting even semi-modern environments, you can have top-level code in a <script src="..." defer> tag. In modern environments, you can use <script type="module"> instead. In old environments, just put the script tag at the end of the body, just prior to </body>.

user_1572470
Related