here is my code, next tab (if available) should get activated if I close the current tab.I could do that but strange, the previous tabcontent is still displaying. Really annoying. could some body help me? Here is my full page html.
<!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>Untitled Document</title>
<style media="all">
div.tabset ul.tab_labels{
list-style: none;
width: 100%;
float: left;
}
div.tabset ul.tab_labels li {
border: 1px solid #999;
float:left;
position:relative;
top: 2px;
left: 10px;
cursor: pointer;
}
div.tabset ul.tab_labels li span{
display: block;
float: left;
}
div.tabset ul.tab_labels li.active_tab{
}
div.tabset ul.tab_labels li.active_tab span {
background-color: #99f;
}
div.tabset div.tab_content{
display: none;
padding: 10px;
border: 1px solid #999;
}
div.tabset div.active_tab{
display: block;
}
div.tabset div.tab_content img{
border: none;
}
div.tabset div.nopadding{
padding: 0;
}
img.cbtn{
}
</style>
<script type="text/javascript" src="j122p.js"></script>
<script type="text/javascript">
var originator = 'l';
document.getElementsByClassName = function(clsName,tag){
var retVal = new Array();
if (tag == null) { tag="*"; }
var elements = document.getElementsByTagName(tag);
for(var i = 0;i < elements.length;i++){
var classes = elements[i].className.split(" ");
for(var j = 0;j < classes.length;j++){
if(classes[j] == clsName)
retVal.push(elements[i]);
}
return retVal;
}
}
$(document).ready(function() {
init_tabsets();
$("img.cbtn").click(function(){
//alert($(this).parents("li").prev().length);
originator = 'i';
if($(this).parents("ul").children("li").length>1){
if($(this).parents("li").next().length==1){
// send to next tab
// alert('Next Available, So pick next tab');
// alert($(this).parents("li").next().attr("id"));
var ntab_id = $(this).parents("li").next().attr("id");
alert(ntab_id);
$("#" + ntab_id).parent().children("ul.tab_labels").children("li").not("#label_" + ntab_id).removeClass("active_tab");
$("#label_" + ntab_id).addClass("active_tab");
// $("#" + ntab_id).parent().children("div.tab_content").not("#" + tab_id).removeClass("active_tab");
$("#" + ntab_id).parent().parent().children("div.tab_content").removeClass("active_tab");
$("#" + ntab_id).addClass("active_tab");
$("#label_"+ntab_id).click();
}
else{
// send to prev tab
// alert('Next is not Available, So pick prev tab');
var ntab_id = $(this).parents("li").prev().attr("id");
alert(ntab_id);
$("#" + ntab_id).parent().children("ul.tab_labels").children("li").not("#label_" + ntab_id).removeClass("active_tab");
$("#label_" + ntab_id).addClass("active_tab");
// $("#" + ntab_id).parent().children("div.tab_content").not("#" + tab_id).removeClass("active_tab");
$("#" + ntab_id).parent().parent().children("div.tab_content").removeClass("active_tab");
$("#" + ntab_id).addClass("active_tab");
$("#label_" + ntab_id).click();
}
$(this).parents("li").remove();
// alert('2');
}
});
});
function init_tabsets() {
$("div.tabset").each(function(){
var tab_labels = $(this).children("ul.tab_labels").children("li");
var tabs = $(this).children("div.tab_content");
for(var tab_index = 0; tab_index < tab_labels.length; ++tab_index){
var this_label = tab_labels[tab_index] ? tab_labels[tab_index] : false;
var this_tab = tabs[tab_index] ? tabs[tab_index] : false;
if(!this_label || !this_tab) continue;
if(!this_label.id || !this_tab.id || "label_" + this_tab.id != this_label.id) assign_new_tab_id(this_label, this_tab);
//$(this.label.click( function() { show_tab(this_tab.id); } )
if(originator=='l'){
alert(originator);
eval('document.getElementById("' + this_label.id+ '").onclick = function() { show_tab("' + this_tab.id+ '");}');
}
if (tab_index == 0 && $(this).find(".active_tab").length == 0) show_tab(this_tab.id);
}
});
}
function assign_new_tab_id(label, tab) {
do{ var random=parseInt(Math.random() * 1000000); }
while (document.getElementById('label_tab_' + random) || document.getElementById('tab_' + random))
label.id = 'label_tab_'+random;
tab.id = 'tab_'+random;
}
var ctabID;
function show_tab(tab_id){
// alert(tab_id+' Inside show_tab');
alert(originator);
$("#label_" + tab_id).parent().parent().children("ul.tab_labels").children("li").not("#label_" + tab_id).removeClass("active_tab");
$("#label_" + tab_id).addClass("active_tab");
$("#" + tab_id).parent().children("div.tab_content").not("#" + tab_id).removeClass("active_tab");
$("#" + tab_id).addClass("active_tab");
// alert('1');
/*
var ctabset = document.getElementById('ULTABS');
var ctablabels = ctabset.getElementsByTagName('li');
for(i=0; i<ctablabels.length; i++){
if(ctablabels[i].className=='active_tab'){
ctabID=ctablabels[i].id;
ctabID = new String(ctabID);
ctabID=ctabID.substr(6);
alert(ctabID);
}
}
var ctabcontents = document.getElementsByClassName('tab_content', 'div');
for(j=0; j<ctabcontents; j++){
ctabcontents[j].style.display='none';
}
document.getElementById('ctabID').style.display = 'block';
//alert(ctablabels.length);
*/
}
</script>
</head>
<body>
<div class="tabset">
<ul id="ULTABS" class="tab_labels clear">
<li><span>One<img class="cbtn" src="clg.png" width="10" height="10" /></span></li>
<li class="active_tab"><span>Two<img src="clg.png" class="cbtn" width="10" height="10" /></span></li>
<li><span>Three<img src="clg.png" class="cbtn" width="10" height="10" /></span></li>
</ul>
<div id="one" class="tab_content"> One Content </div>
<div id="two" class="tab_content active_tab"> Two Content </div>
<div id="three" class="tab_content"> Three Content </div>
</div>
<img src="clg.png" width="10" height="10" />
<script>
</script>
</body>
</html>