Tab Content Script -- remove bottom border on active tab

[keleh]

=====
Script: Tab Content
http://www.dynamicdrive.com/dynamici...tabcontent.htm
=====

My question is how to remove the bottom border on an active tab to make it look connected to the body section AND put the bottom border back on an inactive tab. I've tried various things with z-index and border-bottom but I've been having issues -- e.g. I can get the bottom border to go away but it also goes away on inactive tabs. Anyone have a solution? It'd be greatly appreciated.

[jscheuer1]

Using the demo 'right out of the box' with the optional persistence feature, add to the '#tablist li' style declaration so it looks like this:

#tablist li{
list-style: none;
display: inline;
margin: 0;
position:relative;
}

Then in the script where it says:

tabobjlinks[i].style.backgroundColor=initTabcolor

add these two lines beneath that line:

for (i=0; i<tabobjlis.length; i++)
tabobjlis[i].style.top=0

then below this line:

aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor

add this one:

aobject.parentNode.style.top='1px'

Finally, below this line:

tabobjlinks=tabobj.getElementsByTagName("A")

add this one:

tabobjlis=tabobj.getElementsByTagName("li")

[keleh]

thank you jscheuer1!!!

is it possible to make the active tab the same height as before (i.e. is there a way to increase the height on the bottom rather than shifting the position 1px down?)

[jscheuer1]

I thought about that and realized that with normal tabbed file folders in a file cabinet, the 'active' tab usually is lower than those behind it. Anyway, the effect you describe can be achieved by basically starting over with our modifications, except we still need that position:relative; that we added to:

#tablist li{
list-style: none;
display: inline;
margin: 0;
position:relative;
}

Now, working from an otherwise fresh copy of the script and only within the function called 'highlighttab', add to this line a curly bracket changing it from:

for (i=0; i<tabobjlinks.length; i++)

to:

for (i=0; i<tabobjlinks.length; i++){

after this line:

tabobjlinks[i].style.backgroundColor=initTabcolor

add these two lines:

tabobjlinks[i].style.borderBottom='none'
}

Finally, after this line:

aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor

add this one:

aobject.style.borderBottom='1px solid '+themecolor

[keleh]

Thank you jscheuer1, you're incredible