Member Avatar for todo

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 by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.