[SOLVED] JQuery with CSS Sprites NavBar
I have a simple navbar using CSS sprites. I would like to show the currently active page but am having trouble:
1)determining how to create a "selected" class in the css and
2) how to target the correct div to add the class. I've searched the forum and I'm not using any toggle/collapse/etc. functions but if you know the answer and can link, that would be great.
I've tried : $(document).ready(function () {
$("nav.videos").addClass("selected"); but I can't seem to format the selected class properly.
**Note: There is one main body tag that starts in the header and closes in the footer, so I cannot use the body Id method to addClass. I've tried simply using hide/show for divs on each php page but that doesn't work due to log in issues.
I know this is probably a simple fix, but I'm very new to JQuery and am having trouble even determining what search terms to use to fix this problem.
HTML--->
<tr class='main-table-row' width="100%" height="34px">
<td width="100%">
<ul class="nav" id="nav">
<li class="about"><a href="<?php echo $vars['critter_base_url']?>/about">About</a></li>
<li class="videos"><a href="<?php echo $vars['critter_base_url']?>/videos">Video</a></li>
<li class="player"><a href="<?php echo $vars['critter_base_url']?>/player">Player</a></li>
<li class="discussion"><a href="<?php echo $vars['critter_base_url']?>/discussions">Discussion</a></li>
<li class="upload"><a href="<?php echo $vars['critter_base_url']?>/videos/upload">Upload</a></li>
<li class="mystuff"><a href="<?php echo $vars['critter_base_url']?>/videos/mystuff">My Stuff</a></li>
<li class="help"><a href="<?php echo $vars['critter_base_url']?>/help">Help</a></li>
</ul>
CSS-->>
/** Format the dimensions and look of the nav class **/
.nav {
position:absolute;
top: 0px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
height: 34px;
width: 700px;
list-style-type:none;
background: url('../images/navBackground.gif') no-repeat;
}
/**format link position and rollover images**/
.nav li a:link, .nav li a:visited {
position:absolute;
text-indent:-9000px;
}
.nav .about a:link, .nav .about a:visited{
left:0px;
width:100px;
height:34px;
margin-top: 0px;
margin-left: 0px;
top:0px;
}
.nav .about a:hover, .nav .about a:focus{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/critter_in_nav.gif');
}
.nav .about a:active{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/critter_in_nav.gif');
}
.nav .videos a:link, .nav .videos a:visited{
left:100px;
width:100px;
height:34px;
margin-top: 0px;
margin-left: 0px;
top:0px;
}
.nav .videos a:hover, .nav .videos a:focus{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/video_over.gif');
}
.nav .videos a:active{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/video_over.gif');
}
.nav .player a:link, .nav .player a:visited{
left:200px;
width:100px;
height:34px;
margin-top: 0px;
margin-left: 0px;
top:0px;
}
.nav .player a:hover, .nav .player a:focus{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/videoplayer_over.gif');
}
.nav .player a:active{
margin-top: 0px;
margin-left: 0px;
top:0px;
background:url('../images/videoplayer_over.gif');
}
...and so on for each link