Question

我有这些jquery选项卡，当我在页面上动态添加新选项卡时，它被选中。现在问题是动态/页面添加的标签不能再次被选中。

例如：有一个标签。我添加了一个新选项卡，它现在被选中我可以打开第一个选项卡，但我无法再次打开第二个选项卡。

这是jscode $（function（）{

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event

$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

    //Addtab
        var fields = $("ul.tabs li").length;
    $("a.pekle").click(function() {fields += 1;
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $("ul.tabs").append('<li class="active"><a href="#tab'+fields+'">'+fields+'. Parca</a></li>').hide().fadeIn(500);
        $("div.tab_container").append('<div id="tab'+fields+'" class="tab_content"> Tab'+fields+'</div>');
    $(".tab_content").hide(); //Hide all tab content
    $("#tab"+fields).fadeIn(); //Fade in the active ID content
    return false;});
    //EndAddtab
});
</script>

HTML

<a class="pekle" onClick="addTab()">+ Parca Ekle</a>
<ul class="tabs">
    <li><a href="#tab1">Parca 1</a></li>
</ul>
<div id="tab1" class="tab_content">blabala</div>

Answer 1

这里有一些错误。首先，您tab_container未包含在您的示例中，我假设您希望将其包含在内容div's中，就像这样。

<a class="pekle" onClick="addTab()">+ Parca Ekle</a>
<ul class="tabs">
    <li><a href="#tab1">Parca 1</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">blabala</div>
<div>

其次，因为您要动态添加选项卡，所以您需要使用.on()事件处理程序而不是单击来委派点击处理程序。

如果要将新HTML注入页面，请选择元素和将新HTML放入页面后附加事件处理程序。要么，使用委托事件来附加事件处理程序，如下所述。

$("ul.tabs").on('click', 'li', function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

<强> You can see a working demo here

希望有所帮助。

通过'addTab'添加的标签不可点击或可激活

1 个答案: