CSS, Tabs

[ShawnDT]

Good Afternoon,

I have a small problem I am sure that it has an easy answer. I have created tabs using Unorderd list. My problem is I dont know how to make the tab that is clicked/or navigated to stay a certain colour.

For Example, I have Tab 1, tab 2 tab 3. The hover color is red the inactive color is blue and the active tab color is White. When click on tab 2 or three it does not deactivate tab 1 and change tab 2 to white?

I hope I made it clear. Below I have added the Tab CSS as well as the HTML code I have used.

CSS
.Tabs {
}
/* Tab navigation */

ul.primary {
border-collapse: collapse;
padding: 0 0 0 1em;
white-space: nowrap;
list-style: none;
margin: 5px;
height: auto;
line-height: normal;
border-bottom: 1px solid #bbb;
}

ul.primary li { display: inline; }

ul.primary li a {
background-color: #ddd;
border-color: #bbb;
border-width: 1px;
border-style: solid solid none solid;
height: auto;
margin-right: 0.5em;
padding: 0 1em;
text-decoration: none;
}

ul.primary li.active a {
background-color: #FFFFFF;
border: 1px solid #bbb;
border-bottom: #fff 1px solid;
}

ul.primary li a:hover {
background-color: #eee;
border-color: #ccc;
border-bottom-color: #eee;
}


HTML Code

<ul class = "Tabs primary">
<li><a href="#" onclick="MM_showHideLayers('layProducerData','','show','layProducerContacts','','hide','layProposals','','hide','layNotes','','hide')"><br />
Producer Data</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li><a href="#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','show','layProposals','','hide','layNotes','','hide')">Producer Contacts</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','hide','layProposals','','show','layNotes','','hide')">Proposals</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#" onclick="MM_showHideLayers('layProducerData','','hide','layProducerContacts','','hide','layProposals','','hide','layNotes','','show')">Notes </a></li></ul><br />
<br />

Thanks

 

[MikeBronner]

I am doing the same in my navigation. The way I worked this out was to have my menu database-driven, and save the URL of each menu item in the database as well. What I do then when I create the menu is to check if the saved URL matches the current URL, and if it does I set the class of the <li> to refer to the highlighted CSS, marking it as the current item.

Take Care,
Mike

 

[Vragabond]

Since your tabs do not deal with reloading the page, you will need to add a script to your onclick that changes the state of your tab. So far, your onclick seems to show or hide specific content box. You need to add a function call to it that would loop through the whole list and de-activate all the buttons and then activate the current button. You would do this via javascript and you would get an answer on how to in the forum216.

 

[ShawnDT]

Good Morning Varagabond,

Can you put together an example script, as I did not quite understand the link you sent me too? It seems to only deal with changing the color not deactivating the tab once you click on another one. Thanks for your help.

 

[Vragabond]

I did not send you to any links. I provided a link to the javascript forum where you should ask your question.