|
|
Posted by screenaccount on 06/16/07 23:02
Hello. The snippet of JS, HTML, and CSS below displays a left
navigation menu. Each item in the menu is associated with a particular
DIV section in the page. Clicking that item will show that section and
hide the others, letting the users see different content on the same
page.
That all works OK. However, I can't figure out how to get whatever
menu item the user clicks to remain selected. I created a CSS snippet
("selected") to format selected menu items, I just can't figure out
how to toggle the selected state on and off after click events.
Thanks in advance -- any help is appreciated.
<HTML>
<HEAD><SCRIPT>
var selectedSection;
/* show the selected DIV section, hide the others */
function show(selectedSection) {
document.newSection =
eval('document.getElementById(selectedSection)');
if (document.newSection.style.display == "none") {
document.newSection.style.display = "inline";
document.currentSection.style.display = "none";
}
document.currentSection = document.newSection;
}
</SCRIPT></HEAD>
<BODY>
<DIV id="menu">
<UL>
<LI><A id="menuItem1" onClick="show('section1')">text</A></LI>
<LI><A id="menuItem2" onClick="show('section2')"> text </A></LI>
<LI><A id="menuItem3" onClick="show('section3')"> text </A></LI>
<LI><A id="menuItem4" onClick="show('section4')"> text </A></LI>
<LI><A id="menuItem5" onClick="show('section5')"> text </A></LI>
</UL>
</DIV>
<DIV id="section1">content</DIV>
etc.
</BODY>
</HTML>
/* CSS snippets: */
#menu
{ various settings for the menu }
#menu li a
{ various settings for the menu items }
#menu li:hover a
{ cursor: pointer; other settings for mouseovers }
#menu li a#selected
{ various settings for selected menu items }
[Back to original message]
|