CSS, Tabs

[ShawnDT]

Good Morning,

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]

When the tab is clicked, update the class name of the tab to show that it has been clicked (provided you have a CSS class for that representation):

<li onlclick="this.className='active_tab';">[...]</li>

Keep in mind that this code is very simplified, but it should take you in the right direction.

Take Care,
Mike

 

[ShawnDT]

Good Morning Mike,

thank for you reply. Can you give me an example of the CSS class? I included my CSS in the above post. Thanks

 

[MikeBronner]

SOmething like this:

active_tab
{
    background-color: #eee;
    border-color: blue;
    border-bottom-color: #eee;
}

Take Care,
Mike

 

[MikeBronner]

Correction: I forgot the period:

.active_tab
{
    background-color: #eee;
    border-color: blue;
    border-bottom-color: #eee;
}

Take Care,
Mike

 

[ShawnDT]

Ok I have something like that similar. But all that happends is the first tab that I Designated as active is the only one that is active. If I click off of the tab is still shows the active color and not the one that is actual active. If that makes since.

My CC Code that represents:

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

This is the html code in the page

<li class='active'><a href="#" onclick="MM_showHideLayers('layProducerData','','show','layProducerContacts','','hide','layProposals','','hide','layNotes','','hide')">

I appreciate all of you thoughts

 

[MikeBronner]

Right, you can use that one. In that case, use the following:

<li onlclick="this.className='active';">[...]</li>

Take Care,
Mike

 

[ShawnDT]

Ok, when I do that, and click on the tab(Tab A) it shows that it is active. The problem still remains. If I want to click on Tab B. Tab B does not show that it is active(Color of tab) Tab A still shows as active(colour). I hope this makes since. I want to have it when a tab is active it shows the active color and the other tabs show inactive colors.

Mike, thanks alot for your help.

 

[MikeBronner]

Sorry, there is a typo in there:

<li onclick="this.className='active';">[...]</li>

Take Care,
Mike

 

[MikeBronner]

Of course in addition to that you will need to track wich tab was last active, and de-activate it after you click on the new tab.

Take Care,
Mike

 

[ShawnDT]

Can you direct me to some code or example of this?

 

[cLFlaVA]

what in the world is all this?

ShawnDT, is this what you're looking for?

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title>Untitled</title>
<style type="text/css">
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 a:hover {
    background-color: #eee;
    border-color: #ccc;
    border-bottom-color: #eee;
}

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

</style>
</head>
<body>
	<ul class="Tabs primary">
		<li><a href="#" onClick="return false;">Producer Data</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li><a href="#" onClick="return false;">Producer Contacts</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li><a href="#" onClick="return false;">Proposals</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li><a href="#" onClick="return false;">Notes </a></li>
	</ul><br/><br/>
</body>
</html>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

note: if your MM_showhidelayers function is reloading the page( i don't think it does), this won't work without some tweaking.

otherwise, just add the "return false;" to the end of your onclick event.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ShawnDT]

I think I have this in the right place and No the page does not refresh.

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

It is still not working.

 

[cLFlaVA]

1) it needs to be after the function call, not before.
2) did you use my modified CSS?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ShawnDT]

Yes I used it. Does this look right

<a href="#" onclick="MM_showHideLayers('layProducerData','','show','layProducerContacts','','hide','layProposals','','hide','layNotes','','hide') onClick="return false;">

 

[cLFlaVA]

no.

<a href="#" onclick="MM_showHideLayers('layProducerData','','show','layProducerContacts','','hide','layProposals','','hide','layNotes','','hide'); return false;">

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ShawnDT]

Ok, It works but........... Now if you click and hold down the mouse, it will make active a tab that is not active(Displayed Layer). I know I am a pain, I am just trying to get this so I can role out this app. Thanks Flav