javascript - 如何在位置上先拉事件选项卡，然后在事件选项卡之后推另一个？

Question

我有 2 个导航选项卡，当我点击一个选项卡时，我需要它并激活成为第一个选项卡，而另一个则紧随其后

$(".nav-tabs a").click(function() {
  if ($(this).hasClass('active')) {
    $(this).css('margin-right', '0px');
    $(this).css('margin-left', '-139px');
  }
});
if (!$(".nav-tabs a").hasClass('active')) {
  $(this).css('margin-right', '-139px');
  $(this).css('margin-left', '0px');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item ">
    <a class="nav-link active" data-toggle="tab" href="#home">
      <i class="fa fa-clock-o"></i> زيارة بالساعة</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">
      <i class="fa fa-calendar"></i> زيارة بالشهر</a>
  </li>
</ul>

Answer 1

我建议您使用更优雅的解决方案，不要直接更改 css。您可以在选项卡上单击 prepend()当前选项卡到父级的 div，它将是第一个。我准备了一个sample fiddle给你。

$(".nav-item").click(function() {
    $(this).parent().prepend(this);
});