如何将内容添加到选项卡窗格

时间:2018-08-09 14:05:41

标签: javascript jquery

我有问题。 如果我单击“添加面板”,我想将具有唯一ID的第一个面板内容添加到每个“选项卡窗格”中。现在重复ID和重复内容。
如果内容是表格,我想在每个面板上对其进行编辑。 我该怎么办? http://jsfiddle.net/agata666/5zLmtqby/4/

`

var $foo = $(".foo");
var hash = 1;
$(".add").on("click", function () {
    var $newPanel = $foo.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").data('hash', hashClass).attr("href",  "#" + (++hash)).text("panel " + hash);
    $newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in");
    $($newPanel).addClass(hashClass);
    $("#accordion").append($newPanel.fadeIn());


    var $tablesScreenSix = $(".tablesScreenSix");
    var $tablesScreenSeven = $(".tablesScreenSeven");

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + nextTab + '" data-toggle="tab">panel ' + hash + '</a></li>').appendTo('.tabs');
    $('<div class="tab-pane" id="tab'+nextTab+'"></div>').append($tablesScreenSix.clone()).appendTo('.tab-content').addClass(hashClass);

    var nextTab2 = $('.tabs2 li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + nextTab2 + '" data-toggle="tab">panel ' + hash + '</a></li>').appendTo('.tabs2');
    $('<div class="tab-pane" id="tab'+nextTab2+'"> </div>').append($tablesScreenSeven.clone()).appendTo('.tab-content2').addClass(hashClass);

    $('.tabs a:last').tab('show');
    $('.tabs2 a:last').tab('show');
});


var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');

function generateHash(){
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});

`

0 个答案:

没有答案