How do I change an HTML object's CSS style via javascript?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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

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.

var selectedSection;

/* show the selected DIV section, hide the others */
function show(selectedSection) {
  document.newSection =
  if ( == "none") { = "inline"; = "none";
  document.currentSection = document.newSection;

  <DIV id="menu">
      <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>
  <DIV id="section1">content</DIV>

/* CSS snippets: */
{ 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 }

Site Timeline