将第一个选项卡替换为活动选项卡（交换选项卡）答案

【问题标题】：Replace the first tab with an active one (swap the tabs)将第一个选项卡替换为活动选项卡（交换选项卡）
【发布时间】：2020-12-14 14:04:29
【问题描述】：

是否可以在点击时将第一个选项卡与活动选项卡交换？

我有一个简单的 Bootstrap 选项卡，但我想用一个活动的选项卡替换第一个选项卡，结果我头大了。

所以当我点击选项卡“D”时，它会与选项卡“A”交换位置。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>bootstrap 4 vertical tabs</h2>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="A" role="tabpanel">A Content</div>
  <div class="tab-pane" id="B" role="tabpanel">B Content</div>
  <div class="tab-pane" id="C" role="tabpanel">C Content</div>
  <div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>


</div>

我目前的 JS 知识暂时很差，所以我非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

为此，您可以使用prependTo() 将单击的选项卡移动到列表中的第一个位置。您可以在下面的示例中看到这一点。我会强烈建议您不要这样做，因为这是非常烦人的行为，并且您的用户不清楚为什么标签会四处移动。

let $navlinks = $('.nav-link').on('click', e => {
  $navlinks.removeClass('active');
  $(e.target).prependTo('ul.nav');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>bootstrap 4 vertical tabs</h2>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="A" role="tabpanel">A Content</div>
    <div class="tab-pane" id="B" role="tabpanel">B Content</div>
    <div class="tab-pane" id="C" role="tabpanel">C Content</div>
    <div class="tab-pane" id="D" role="tabpanel">D Content</div>
  </div>
</div>

【讨论】：