No replies to this topic

[daisey]

hi! my first Pixel2Life post... ever!

I need some javascript expertise. I'm building a site, with each "page" contained in divs on ONE PAGE. So, when you click around, you're just turning divs on/off. Yes, the page is unbearably long, but it's what the project requires. So far, so good.

I setup a css/javascript list tabbed navigation. The problem I'm running into is finding a clean way of making the active tab style "sticky" -- because it's all one page, I have to somehow do an "onClick - change tab background style" type of thing. And we all know a:active never really works the way we want it to.

The javascript is:

// show and hide TABS
var tabs = ["tab1","tab2","tab3"];
function showTab( tab ){

// first make sure all the tabs are hidden
for(i=0; i < tabs.length; i++){
var obj = document.getElementById(tabs[i]);
obj.style.display = "none";
}

// show the tab we're interested in
var obj = document.getElementById(tab);
obj.style.display = "block";


}

The HTML is:

<ul id="tabmenu">
<li><a href="#" onClick="showTab('tab1')" class="active"><br>Tab 1</a></li>
<li><a href="#" onClick="showTab('tab2')"><br>Tab 2</a></li>
<li><a href="#" onClick="showTab('tab3')"><br>Tab 3</a></li> 
</ul>

<div id="tab1" class="tabContent">
tab 1 info
</div> 

<div id="tab2" class="tabContent">
tab 2 info
</div>

<div id="tab3" class="tabContent">
tab 3 info
</div>

And each li has the following CSS:

background: url("../images/tabStrip.gif") 0 0 no-repeat;

With the following hover and active style:

#tabmenu a:hover {
background-position: -82px 0;
}

If I haven't provided enough information to make sense, please let me know. Again, what I'm hoping to do is add something to the showTab function which will change the background css properties or allow me to add the "active" style.

Help?

Edited by daisey, 24 January 2007 - 02:49 AM.