Website uses 1 html file with divs handling pages. Need to set nav item active, how?

[dalearyous]

so i know how to do exactly what i need when i am using standard html pages in my navigation. however, this particular site has 1 html file/page and all the "interior pages" are just inside divs with a unique ID and the navigation jumps to them with a nice jquery scroller.

how do i set an active state so that when one DIV is clicked on the button changes to an active state? my navigation uses the CSS sprite technique ... very close to this guide: http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

normally this works:
CSS:

/*Hover State*/
ul#topnav a:hover {
	background-position: left -45px;
}

ul#topnav li.home a {
	background-image: url(../images/menu/home_a.png);
	width: 112px;
}

#home li.home a, 
#howitworks li.howitworks a, 
#aboutus li.aboutus a,
#faq li.faq a 
{
	background-position: left bottom;
	height: 86px;
}

HTML:

	<ul id="topnav">
            <li class="home"><a href="index.html" class="panel">Home</a></li>
            <li class="howitworks"><a href="howitworks.html"  class="panel">How It Works</a></li>
            <li class="aboutus"><a href="aboutus.html" class="panel">About Us</a></li>
            <li class="faq"><a href="faq.html" class="panel">FAQ</a></li>
  	</ul>

but instead of href=" .html" it obviously has this instead: href="#home" etc...

 

[Ken g6]

As an example,

#home li.home a

means to first find the tag with id="home". Then find all "li" tags with class="home" within that id tag. Then find all "a" tags within all those tags found earlier. Then apply the following CSS styles to those "a" tags.

I don't see any tags with id="home". Perhaps you meant "#topnav"?

P.S. "ul#topnav" should be redundant, as an id should only appear once per page. Although people do make mistakes.

Edit: And I didn't answer your question at all, did I? Well, it sounds like you need to run some JavaScript in the OnClick event for a tag. (<a href="#" onclick="runThisJavascriptFunction();"> )

 

[dalearyous]

you don't see any id="home" tags because i was putting that id tag on the body tag of each corresponding pages.

your javascript recommendation is right, but i have no idea where to begin.

 

[IronWing]

I think you could do it using the technique on this page. Maybe modifying the code that causes the text to appear and disappear under the left side menu. No javascript needed. My only concern is that all the "pages" might have to load for this to work.

http://meyerweb.com/eric/css/edge/popups/demo.html


Also, look at the source for the turtle popup divs on this page:
http://www.mineralarts.com/artwork/tsunamiart.html
I had to use onMouseOver and onMouseOut to make it work but that's it for scripting on the page.

 

[dalearyous]

stupid, solution right in front of me:

ul#topnav li.home a.selected {
	background-position: left bottom;
	height: 86px;
}

for each nav item

 

[Wyndru]

Thanks for posting the solution. I've had issues with .focus and .active because once you click anywhere else on the screen it loses the style, but I've never tried .selected before.

I had just given up and started using session variables in PHP to determine which item needed to be marked active.

 

[dalearyous]

so i have ONE FINAL issue ... i used this guide: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/ to implement a picture scroller ... but i want to add next and previous buttons to it and don't know how 🙁

@Wyndru
np, hopefully useful to someone ... upstate, ny eh? buffalo!