0

これらのjqueryタブがあり、新しいタブをページに動的に追加すると、それが選択されます。問題は、動的に/ページに追加されたタブを再度選択できないことです。

例: 1 つのタブがあります。新しいタブを追加すると、それが選択され、最初のタブを開くことができますが、2 番目のタブを再度開くことができません。

これが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 に答える