将左侧列表中的按钮添加到右边选项卡中

使用jqery实现以下功能
1.点击左侧按钮列表中某个按钮,在右侧当前选中的tab中，生成该按钮及属性(左侧点击的按钮名称,id等移过来这样)
2.生成成功后,左侧按钮变灰

说明
右侧选项卡为四个固定的按钮占位,从上下到排列。第一次时，将左侧按钮生成到第一个坑中，依次填坑

img


保存代码到html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <style>
    .container {
      display: flex;
    }

    .left-panel {
      width: 200px;
    }

    .left-panel ul {
      list-style: none;
      padding: 0;
    }

    .left-panel li {
      cursor: pointer;
    }

    .left-panel li.disabled {
      color: #ccc;
      cursor: not-allowed;
    }

    .right-panel {
      flex: 1;
    }

    .tab {
      display: none;
    }

    .tab.active {
      display: block;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="left-panel">
    <ul>
      <li data-id="1" data-name="Button 1">Button 1</li>
      <li data-id="2" data-name="Button 2">Button 2</li>
      <li data-id="3" data-name="Button 3">Button 3</li>
      <li data-id="4" data-name="Button 4">Button 4</li>
    </ul>
  </div>
  <div class="right-panel">
    <div class="tab active">
      <h2>Tab 1</h2>
      <div class="content"></div>
    </div>
    <div class="tab">
      <h2>Tab 2</h2>
      <div class="content"></div>
    </div>
    <div class="tab">
      <h2>Tab 3</h2>
      <div class="content"></div>
    </div>
    <div class="tab">
      <h2>Tab 4</h2>
      <div class="content"></div>
    </div>
  </div>
</div>
<script>
  $(function() {
  // 点击左侧按钮
  $('.left-panel li').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('disabled')) {
      return;
    }
    // 获取按钮的id和名称
    var id = $this.data('id');
    var name = $this.data('name');
    // 获取当前选中的tab
    var $tab = $('.right-panel .tab.active');
    // 在当前tab中生成按钮
    $tab.find('.content').append('<button data-id="' + id + '">' + name + '</button>');
    // 禁用左侧按钮
    $this.addClass('disabled');
  });

  // 点击右侧按钮
  $('.right-panel').on('click', 'button', function() {
    var $this = $(this);
    // 获取按钮的id
    var id = $this.data('id');
    // 获取左侧按钮
    var $button = $('.left-panel li[data-id="' + id + '"]');
    // 启用左侧按钮
    $button.removeClass('disabled');
    // 移除右侧按钮
    $this.remove();
  });
});
</script>

</body>
</html>