如何在laravel php中克隆具有相同数据的选项卡

时间:2017-10-24 09:49:44

标签: javascript html

所以我试图做一个克隆功能。所以我放了两个标签和一个按钮来添加一个标签,所以当我点击那个按钮时,一个带有“LEG 2”的新标签假设用与之前标签相同的数据创建。我怎么能这样做?

plotOptions: {
  series: {
    animation: false,
    dataLabels: {
      enabled: true,
      nodeFormat: "{point.name}mm"
    },
    allowPointSelect: true,//you need this to allow selection
    colorByPoint: false,
    point: {
      events: {
        select: function(event) {
          if (typeof this.isNode !== 'undefined') return;//to disable selecting the root node
          this.custom_old_color = this.color;//save old color
          this.update({
            color: 'red'
          });
        },
        unselect: function(event) {
          if (typeof this.isNode !== 'undefined') return;
          this.update({
            color: this.custom_old_color//restore old color
          });
        }
      }
    }
  }

<ul id="tabs" class="nav nav-tabs nav-tabs-linetriangle" data-init-reponsive-tabs="dropdownfx">
    <li  class="active">
        <a data-toggle="tab" href="#1"><span>LEG 1</span></a>
    </li>

    <li>
        <button class="btn alt-btn-black btn-xs alt-btn newTravelLegButton" type="button" >
            <i class="fa fa-plus" aria-hidden="true" color="black"></i>
        </button>
    </li>
</ul>

1 个答案:

答案 0 :(得分:1)

您可以在视图中添加以下jQuery代码以满足您的要求:

<script>
$(document).ready(function(){
    var i = 1;
    $('.newTravelLegButton').click(function(){
        $('#tabs li').removeClass('active');
        $('.tab-pane').removeClass('active');
        i++;
        tabHTML = '<li  class="active">';
        tabHTML += '<a data-toggle="tab" href="#1"><span>LEG '+i+'</span></a>';
        tabHTML += '</li>';

       contentHTML = '<div class="tab-pane active" id="'+i+'">';
        contentHTML += '<div class="row">';
        contentHTML += $('#'+(i-1)).html();
        contentHTML += '</div>';
        contentHTML += '</div>';

       lastLI = $('.newTravelLegButton').closest('li');
        $( tabHTML ).insertBefore( lastLI );
        $('.tab-content').append(contentHTML);

   });
});
</script>