Keep a tab highlighted while in use. (HTML, CSS, JAVASCRIPT)?

Question

So im creating a site for a school project. I thought it would look better if i could make the tab your using be a different color. like if you were under the Home tab the Home text along the top would be white and the rest would be black, and likewise for the rest, if i wanted to select the about me tab it would be white and the rest would be black. If that doesn't make sense then tell me. Also i'm using CSS and a simple style tag doesn't work.

Answer 1

This is how it's done generally. Place a javascript caller function on the tab, and set its element's className to activeTab.



HTML :

Home Tab

Tab One

Tab Two

CSS :



.nonActiveTab {

color: black;

}

.activeTab {

color: white;

}



Javascript :



function activateTab(TheTab) {

//Make All tab black

var tabContainer = document.getElementById('TabsContainer');

var tabsCount = tabContainer.getElementsByTagName('A').childNodes.length

for (var i; i < tabsCount; i++) {

tabContainer.childNodes[i].className = 'nonActiveTab';

}

//Set Desired Tab to be Activated

TheTab.className = 'activeTab';

}

Answer 2

If it's a link tab, you can just apply



a link:active{

CSS code

}

Answer 3

i've been browsing more than 3 hours today looking for answers to the same question, yet I haven't found any interesting discussion like this. it's pretty worth enough for me.