Ok so Ive got a very basic CSS tab content system, very neat and clean, but I want to be able to create a default state so the first tab div is open without selection neccesary?
Any ideas, I would like top avoid jQuery or JS but if it has to be done i will use it. Heres the coding:
<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>
<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>
and the style:
#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}
Many thanks in advance for advice and help.
