I have a menu that spans several divs, I move between divs by clicking an image below the menu (a small circle) and I need that image to change to 'active' class to indicate which div the user is viewing. However, upon first click the div changes, but it is until the second click that the 'active' class is added. I would also need the first circle to be active upon opening the menu, but I can do that directly on the HTML, I believe.
The relevant part of the code would be:
$(".cubierta1").click(function () {
$(".nav a").removeClass("active");
$(this).addClass("active");
$("div[id$=_options]").css("visibility", "hidden");
$('#cubierta1_options').css("visibility", "visible");
});
And you can see the example here. Click on the first square to see the menu.
What would I need to change to make both events fire at first click?
Thanks for your help.
There's two nav
divs, one positioned on top of the other. When you click one of the links within a nav
div
, it acquires the active
class, then it's immediately hidden. What you see after you click is the other nav
div
that lacks the active
button.
You need to get rid of one of the nav
divs, and position the remaining one outside the cubierta1_options
, or add the active
class to all of the cubierta1
links.