Forum Moderators: not2easy
Anyway, I posted about this about a week ago and we didn't really get anywhere with it. I've made some changes and some progress with it myself, but I still have one point that I'm stuck on.
When you click the tabs, the content changes, which is perfect. When you mouseover the tabs, you'll see that they change color to match the content are below them.
I want the tab links to keep the active/hover style when I click them.
Questions
Is there a way to do this with the :target CSS3 pseudo-class?
Is there some other way to this with CSS?
If not, how about javascript?
Other stuff
I know this won't work with IE. It's for internal use by three or four people who all use Firefox.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style type="text/css" media="screen">
* {
padding: 0;
margin: 0px auto;
}img { border: 0; }
body {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background: #fff;
}p {
padding-bottom: 1.1em;
}
/* navigation */#navlist { }
#navlist ul {
color: #fff;
float: left;
width: 100%;
}#navlist ul li {
display: inline;
}.selected {
background: #fff
}#navlist ul li a {
background: #999;
padding: .5em;
color: #000;
text-decoration: none;
float: left;
border-right: #666 solid 1px;
border-top: #ccc solid 1px;
margin-right: 5px;
}#navlist ul li a:active, #navlist ul li a:hover {
background-color: #ccc;
color: #fff;
}/* end navigation */
#clearing {
clear: both;
}#main {
font-family: verdana;
font-size: 10px;
color: #000000;
text-align: left;
margin: 1px auto;
margin-top: 10px;
width: 97%;
}.content {
background: #ccc;
float: left;
width: inherit;
padding: 10px;
margin-bottom: 10px;
border-right: #666 solid 1px;
border-top: #ccc solid 1px;
}div.stuff div { display: none; }
div.stuff div:target { display: block; width: 97%; }
</style>
</head>
<body>
<div id="main"><div id="clearing"></div>
<div id="navlist">
<ul>
<li><a href="#day1" id="tab1">Today only</a></li>
<li><a href="#day2" id="tab2">Two days</a></li>
<li><a href="#day3" id="tab3">Three days</a></li>
<li><a href="#day4" id="tab4">Four days</a></li>
<li><a href="#day5" id="tab5">Five days</a></li>
<li><a href="#special" id="tab6">Special</a></li>
</ul>
</div><div class="stuff">
<div class="content" name="day1" id="day1">Today only.</div>
<div class="content" name="day2" id="day2">Two days.</div>
<div class="content" name="day3" id="day3">Three days.</div>
<div class="content" name="day4" id="day4">Four days.</div>
<div class="content" name="day5" id="day5">Five days.</div>
<div class="content" name="special" id="special">Special.</div>
</div>
<div id="footer">This should be below the other stuff</div>
</div>
</body></html>
Now in your <a> tags add a javascript function to change/add the selectedTab class when it's clicked:
----
<a href="..." onclick="this.className='selectedTab'" ...>...</a>
---
and bam! your tab's light gray style sticks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style type="text/css" media="screen">
* {padding: 0;margin: 0px auto; }
img { border: 0; }
body {
font-family: verdana, arial, sans-serif;
font-size: x-small;
background: #fff;
}p {padding-bottom: 1.1em; }
/* navigation */#navlist { }
#navlist ul {
color: #fff;
float: left;
width: 100%;
}#navlist ul li { display: inline; }
.selected {background: #fff }
#navlist ul li a {
background: #999;
padding: .5em;
color: #000;
text-decoration: none;
float: left;
border-right: #666 solid 1px;
border-top: #ccc solid 1px;
margin-right: 5px;
}.selectedTab, #navlist ul li a:active, #navlist ul li a:hover {
background-color: #ccc;
color: #fff;
}/* end navigation */
#clearing { clear: both; }#main {
font-family: verdana;
font-size: 10px;
color: #000000;
text-align: left;
margin: 1px auto;
margin-top: 10px;
width: 97%;
}.content {
background: #ccc;
float: left;
width: inherit;
padding: 10px;
margin-bottom: 10px;
border-right: #666 solid 1px;
border-top: #ccc solid 1px;
}div.stuff div { display: none; }
div.stuff div:target { display: block; width: 97%; }
</style>
</head>
<body>
<div id="main"><div id="clearing"></div>
<div id="navlist">
<ul>
<li><a href="#day1" onclick="this.className='selectedTab'">Today only</a></li>
<li><a href="#day2" onclick="this.className='selectedTab'">Two days</a></li>
<li><a href="#day3" onclick="this.className='selectedTab'">Three days</a></li>
<li><a href="#day4" onclick="this.className='selectedTab'">Four days</a></li>
<li><a href="#day5" onclick="this.className='selectedTab'">Five days</a></li>
<li><a href="#special" onclick="this.className='selectedTab'">Special</a></li>
</ul>
</div><div class="stuff">
<div class="content" id="day1">Today only.</div>
<div class="content" id="day2">Two days.</div>
<div class="content" id="day3">Three days.</div>
<div class="content" id="day4">Four days.</div>
<div class="content" id="day5">Five days.</div>
<div class="content" id="special">Special.</div></div>
<div id="footer">This should be below the other stuff</div>
</div>
</body></html>
