SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    onclick change CSS class

    I'm trying to create a nav menu where when you click on one of the buttons, it stays highlighed like when you hover over it.

    This is what I have right now and doesn't seem to want to work. Is there something I'm missing?

    Here's the code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">
    ul.nav_col {
    	position: absolute;
    	top: 167px;
    	left: 14px;
    	width: 180px;
    	padding: 0px;
    	margin: 0px;
    	list-style-type: none; 
    }
    .nav_col li {
    	display: block;
    	margin: 0px 0px 3px 0px;
    	background: #f1f1f1 url(nav_bkrnd.gif) top left repeat-x;
    	min-height:1%;
    }
    .nav_col li a {
    	display: block;
    	text-decoration: none;
    	color: #20e;
    	border: 1px solid;
    	border-color: #ccc #bbb #b6b6b6 #ccc;
    	padding: .7em 3px .7em 37px;
    	min-height:1%;
    }
    .nav_col li a:hover, .nav_col a:active, .nav_col li a .select {
    	border-color: #854515 #773300 #854515 #773300;
    	background: #FFF;
    	color: #773300;
    }
    /* mac hide \*/
    * html .nav_col li, * html .nav_col li a { height: 1%; }
    /* end hide*/
    </style>
    <script language="JavaScript" type="text/javascript"><!--
    function navSelect(id) {
    	document.getElementById(id).className='select';
    }
    //--></script>
    </head>
    
    <body>
    
    	<ul class="nav_col">
    	  <li><a href="#" id="nav_news" onClick="navSelect('nav_news');">Calendars &amp; News</a></li>
          <li><a href="#" id="nav_contact" onClick="navSelect('nav_contact');">Contact</a></li>
          <li><a href="#" id="nav_webmail" onClick="navSelect('nav_webmail');">Webmail</a></li>
        </ul>
    
    </body>
    </html>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .nav_col li a:hover, .nav_col a:active, .nav_col li a .select {
    	border-color: #854515 #773300 #854515 #773300;
    	background: #FFF;
    	color: #773300;
    }
    Remove the space between 'a' and '.select'

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    wow, that was it. Unbelievable.

    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •