0

I am trying to have a native-like tab bar for a mobile web application.

I have a fixed menu list that changes the page content on the same page and I would like to have the menu items instantly change highlighted state when tapped but am finding some lag on removing the previously selected item.

The :active and :focus and .active all have the same appearance.

My change menu item script:

$(".nav li").click(function(e){
    $(".nav li").removeClass("active");
    $(this).addClass("active");
    //do other functions...
})
user3339688
  • 31
  • 2

1 Answers1

0

A faster solution is to remove the class only where it is needed:

$(".nav li").click(function(e){
    $(".nav .active").removeClass("active");
    $(this).addClass("active");
    //do other functions...

})

An even faster alternative (because it is handled by the browser) is to use radio buttons for that. You don't need any scripting for that solution. and you can style it as you like. See

css tricks solution

hongkiat solution

vals
  • 61,425
  • 11
  • 89
  • 138