Tab 1 does not work. Tab 1 is drawn from MySQL table. I want show default tab and add or delete an extra tab and post mysql get inserted tab id append not count?. Can you help?
Visit jsfiddle jsfiddle.net/datakolay/33aM3/
Html
<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
<li id="t21" class="ntabs"> Tab Mysql id 21
<a href="" id="close21" class="close">×</a>
</li>
<li id="t22" class="ntabs"> Tab Mysql id 22
<a href="" id="close22" class="close">×</a>
</li>
</ul>
<div id="tabcontent">
<p id="c21">Test</p>
<p id="c22">Test</p>
</div>
Javascript
$(function() {
var total_tabs = 0;
total_tabs++;
$("#addtab, #litab").click(function() {
total_tabs++;
$("#tabcontent p").hide();
addtab(total_tabs);
return false;
});
function addtab(count) {
var closetab = '<a href="" id="close'+count+'" class="close">×</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Tab Extra '+closetab+'</li>');
$("#tabcontent").append('<p id="c'+count+'">Tab Content </p>');
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#t"+count).bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
});
$("#close"+count).bind("click", function() {
// activate the previous tab
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+count).prev().fadeIn('slow');
$(this).parent().remove();
$("#c"+count).remove();
return false;
});
}
});
MY NEW EDİT Visit jsfiddle jsfiddle.net/datakolay/33aM3/8/
$(function() {
$('#tabcontent p').hide().filter(':lt(1)').show();
$("#tabul li").removeClass("ctab");
$(".ntabs").filter(':lt(1)').addClass("ctab");
$("#addtab").click(function() {
$("#tabcontent p").hide();
var dataString = '';
$.ajax({
type: "POST",
url: "add_tab.php",
data: dataString,
cache: false,
success: function(html)
{
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
}
});
return false;
});
$(".ntabs").bind("click", function() {
var id = $(this).attr('id')
$("#tabul li").removeClass("ctab");
$(".ntabs").addClass("ctab");
$("#tabul li").removeClass("ctab");
$("#"+id).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+id).fadeIn('fast');
});
$(".close").bind("click", function() {
var id = $(this).attr('id')
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+id).prev().fadeIn('fast');
$(this).parent().remove();
$("#c"+id).remove();
return false;
});