0

我有这些 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>
4

1 回答 1

0

这里有几件事不对劲。首先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;
});

你可以在这里看到一个工作演示。

希望有帮助。

于 2012-07-20T22:53:11.923 回答