Hello, i need some help with a menu. See
the following menu:
menu
The code for this menu:
<div id="menu">
<ul>
<li class="home"><a href="#home" class="panel">home / <span class="go">you are here</span></a></li>
<li class="about"><a href="#about" class="panel">about / <span class="go">go here</span></a></li>
<li class="cases"><a href="#cases" class="panel">cases / <span class="go">go there</span></a></li>
<li class="photos"><a href="#photos" class="panel">photos / <span class="go">maybe here</span></a></li>
<li class="contact"><a href="#contact" class="panel">contact / <span class="go">or even here<span></span></a></li>
</ul>
</div>
What i want
to do: onclick a menu item:
1.
change the red text
to yellow 'you are here'
2.
change the previous menu item back
to its original state (eg red and "go here").
The 4 values "go here", "go there", "maybe here", "or even here" are
the 4 values that should be assigned
to the other menu items (like
the example).
This is
the code i already have:
$('#menu ul li.home').addClass('active')
$('#menu ul li.active a .go').html("you are here");
$("#menu ul li").click(function () {
$('#menu ul li.active').removeClass('active');
$(this).addClass('active');
$('#menu ul li.active a .go').html("you are here");
});
var arr = [ "go here", "go there", "maybe here", "or even here" ];
var obj = { item1: "go here", item2: "go there" ,item3: "maybe here", item4: "or even here"};
$('#menu ul li').click(function () {
var str = $('#menu ul li.active a .go').text();
$('#menu ul li.active a .go').html(str);
});
As you see, it's incomplete. I don't
how to get
the values from
the array and assign them too a menu item.
The replace text works, but not
the change-back-to-original-state. Also, right now, for some reason i can't click ONTO
the list item itself in order
to activate
the jquery code. I need
to click just a few pixels under it. But i guess that's a css issue.
If anyone can help, i'd be super thankful!
Regards,
Mathijs
