I am using Javascript to highlight/dim active/inactive tabs respectivly. Tab 1 is active by default, and when the other tab gets clicked, tab1 should remove "active" class from itself, and the clicked tab should add "active" class to itself...

It seems like the class is not being removed properly, because the old tab remains highlighted. I have copied pasted my CSS and Javascript code, but if you need anything else, please let me know.

var last_tab = 1;
function tabshowhide(tabid)
{
     var curr=document.getElementById(tabid);
     var last=document.getElementById(last_tab);
     //var classnamelast = last.className+" ";
     var rep= last.className.match(" "+"active")?" "+"active":"active";
     last.className = "tab";
     curr.className = "active";
     var curr_content = document.getElementById("tab"+tabid+"_data");
     var last_content = document.getElementById("tab"+last_tab+"_data");
     curr_content.style.display = "";
     last_content.style.display = "none";
     last_tab = tabid;
}

CSS:

.tab ul, .tab li{border:0; margin:0; padding:0; list-style:none;}
.tab ul{
    border-bottom:solid 1px #e9f0f5;
    height:29px;
}
.tab li{float:left; margin-right:2px;}
.tab a:link, .tab a:visited{
    background:url(img/tab-round.png) right 60px;
    color:#56554e;
    display:block;
    font-weight:bold;
    height:30px;
    line-height:30px;
    text-decoration:none;
}
.tab a span{
    background:url(img/tab-round.png) left 60px;
    display:block;
    height:30px;
    margin-right:14px;
    padding-left:14px;
}
.tab a:hover{
    background:url(img/tab-round.png) right 30px;
    display:block;
    color:#e0ded0;
}
.tab a:hover span{
    background:url(img/tab-round.png) left 30px;
    display:block;
}

/* -------------------------------- */
/*  ACTIVE ELEMENTS                 */
.tab .active a:link, .tab .active a:visited, .tab .active a:visited, .tab .active a:hover{
    color:#1c4e7e;
    background:url(img/tab-round.png) right 0 no-repeat;
} 
.tab .active a span, .tab .active a:hover span{
    background:url(img/tab-round.png) left 0 no-repeat;
}

Edited 3 Years Ago by mike_2000_17: Fixed formatting

Here's a little example on how to set high-lighted text with an onclick event! Just modify this according to your needs.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style" media="all"?>
<!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=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Demo</title>
<style id="internal-style" type="text/css" media="all">
/* <![CDATA[ */
ul { list-style-type: none; font-weight: bold; color: #000; }   
li { display: block; }
.active { color: #f00; }

li.remClass { color: inherit; } 
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */

function tabShowHide(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;

for (var i = 0; i < tab.length; i++) { 
if (tab[i].className != '') {
tab[i].className = 'remClass'; 
 } 
}
if ( t.tagName.toLowerCase() == 'li' && t.className != 'active' ) { 
t.className = 'active'; 
 }
}
window.onload = function() {
 tab = document.getElementsByTagName('ul')['sample'].getElementsByTagName('li');
for (var x = 0; x < tab.length; x++) { tab[x].onclick = tabShowHide; }
}
 
/* ]]> */

</script>
</head>
<body>
<div>
<ul id="sample">
<li class="active">Link1</li>
<li>Link2</li> 
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.