Here's the code:
CODE
<html>
<head>
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px trebuchet ms;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: grey;
}
#tablist li a.current{
background-color:#232323;
}
#tabcontentcontainer{
width: 400px;
height: 300px;
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
</head>
<style type="text/css">
<!--
body {
font-family: trebuchet ms;
font-size: 8pt;
color: #990000;
background-color: #000000;
background image: #000000 url('images/bg.jpg');
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}
td {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
p {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
pre {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
a {
color: #999999;
}
input {
font-family: arial;
font-size: 8pt;
color: #999999;
background-color: #000000;
border:0px solid black;
}
</style>
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">About</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#232323">Blog</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#232323">Stuff</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#232323">Credits</a></li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
<p>
<b>Name:</b>
<br>
<b>Age:</b>
<br>
<b>Location:</b>
<br>
<br>
</div>
<div id="sc2" class="tabcontent">
<Blogger><br>
<BlogDateHeader><br>
<$BlogDateHeaderDate$><br>
</BlogDateHeader><br>
<BlogItemTitle><br>
<$BlogItemTitle$><br>
<a
name="<$BlogItemNumber$>"> </a></BlogItemTitle><br>
<div class="blogPost"></b>
<p align="justify"><font size=1><$BlogItemBody$><br>
<div class="byline"> posted by <a
href="mailto:insert email here"><$BlogItemAuthorNickname$></a> |
<$BlogItemDateTime$> |
</div>
</b>
</Blogger>
</div>
<div id="sc3" class="tabcontent">
</div>
<div id="sc4" class="tabcontent">
</div>
</body>
</html>
<head>
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px trebuchet ms;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: grey;
}
#tablist li a.current{
background-color:#232323;
}
#tabcontentcontainer{
width: 400px;
height: 300px;
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
</head>
<style type="text/css">
<!--
body {
font-family: trebuchet ms;
font-size: 8pt;
color: #990000;
background-color: #000000;
background image: #000000 url('images/bg.jpg');
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #000000;
}
td {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
p {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
pre {
font-family: trebuchet ms;
font-size: 8pt;
color: #666666;
background-color: #000000;
}
a {
color: #999999;
}
input {
font-family: arial;
font-size: 8pt;
color: #999999;
background-color: #000000;
border:0px solid black;
}
</style>
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">About</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#232323">Blog</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#232323">Stuff</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#232323">Credits</a></li>
</ul>
<DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
<p>
<b>Name:</b>
<br>
<b>Age:</b>
<br>
<b>Location:</b>
<br>
<br>
</div>
<div id="sc2" class="tabcontent">
<Blogger><br>
<BlogDateHeader><br>
<$BlogDateHeaderDate$><br>
</BlogDateHeader><br>
<BlogItemTitle><br>
<$BlogItemTitle$><br>
<a
name="<$BlogItemNumber$>"> </a></BlogItemTitle><br>
<div class="blogPost"></b>
<p align="justify"><font size=1><$BlogItemBody$><br>
<div class="byline"> posted by <a
href="mailto:insert email here"><$BlogItemAuthorNickname$></a> |
<$BlogItemDateTime$> |
</div>
</b>
</Blogger>
</div>
<div id="sc3" class="tabcontent">
</div>
<div id="sc4" class="tabcontent">
</div>
</body>
</html>