asked on

Display Active Tab State Using CSS

Hello,
I am new to the php and css world and I need a lending hand. I have 4 pages that I want to link to and display on the same page with the same menu header, just different detail when a link is clicked. I have figured most of it out and took the easy way out by placing my tabbed menu at the top of each page.

How can I set the second, third, and fourth tabs to be highlighted, basically looking like the tab is in an active
state. Right now the first tab is always 'white' or 'active' when I go to the second, third or fourth page. So all I need is to be able to change the default color of the tab from green to white for the second tab for the second link and make the first tab 'green' or 'inactive' looking. I know this has to be easy, i just don't get the whole css thing yet forgive my ignorance but I'm learning :)

Here is the code that is on the top of all of my pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />



<style type="text/css">

body {
font: 50% verdana, arial, sans-serif;
background-color: #fff;
margin: 50px;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
border-bottom: 1px solid #fff;
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
color: #000;
}

#tabnav a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}

#tabnav a:hover {
background: #fff;
}

</style>
</head>
<body id="tab1">

<h1>NovaSys Health - Customer Service Dashboard</h1><BR>

<ul id="tabnav">
      <li class="tab1"><a href="csbraina.php">Member</a></li>
      <li class="tab2"><a href="group.php">Group</a></li>
      <li class="tab3"><a href="TPACensusReportsb.php">Claims</a></li>
      <li class="tab4"><a href="Docs.php">Documentation</a></li>
</ul>
<BR>
<BR>

That's It!
Thanks,
JK

Batalf

First of all, it doesn't look like you need 4 classes. tab1 and tab2 seem to be enough.

What I would have done is to just let the first page be like this:

<ul id="tabnav">
<li class="tab1"><a href="csbraina.php">Member</a></li>
<li class="tab2"><a href="group.php">Group</a></li>
<li class="tab2"><a href="TPACensusReportsb.php">Claims</a></li>
<li class="tab2"><a href="Docs.php">Documentation</a></li>
</ul>

The second one like this

<ul id="tabnav">
<li class="tab2"><a href="csbraina.php">Member</a></li>
<li class="tab1"><a href="group.php">Group</a></li>
<li class="tab2"><a href="TPACensusReportsb.php">Claims</a></li>
<li class="tab2"><a href="Docs.php">Documentation</a></li>
</ul>

And so on, and so on.

Batalf

SOLUTION

GrandSchtroumpf

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

kochsqlserv

ASKER

Thank you very much that did it. Can you explain to me why the first class shows active so I can get a better grasp of it.

GrandSchtroumpf

BTW, the class should have been "selected" with an "l" and the selectors should have been "ul#tabnav li" and "ul#tabnav li.selected"

What is your question exactly? If you want general information about CSS, i you can start here: http://www.htmlhelp.com/reference/css/

kochsqlserv

ASKER

I figured it out thanks for the help! Good link also!