单击任何其他选项卡上创建问题

Question

我试图让jQuery的标签和点击我想有活动标签，但其他选项卡上的十字图标越来越受到影响，如果我不关闭一个选项卡，请参阅下面我的代码，并请指教我在哪里，我在做错误？

var text = '';
var tab = "";
var flag = 0;
var athis = '';

$(".tablinks").on("click", function() {
  var id = $(this).attr('rel');
  athis = $(this);
  $(this).addClass('active');

  if (flag == 0) {
    text = $(this).text();
    $(this).html('<i class="fas fa-times"></i>');
    $('.tabcontent').hide();
    $('#' + id).slideDown();
    flag = 1;
  } else {
    athis.html(text);
    $('#' + id).slideUp();
    flag = 0;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" rel="a">Are you interested</button>
  <button class="tablinks" rel="b">Call Us</button>
  <button class="tablinks" rel="c">Followus</button>
</div>

<div id="a" class="tabcontent">
  <h3>Are you interested</h3>
</div>

<div id="b" class="tabcontent">
  <h3>Contact us</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="c" class="tabcontent">
  <h3>Follow us</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 1

一个快速的解决将是这行的事件处理程序的顶部，但我觉得你的代码可以改写，使这种不必要的：

 $('.tablinks:has(i)').not(this).click();

var text = '';
var tab = "";
var flag = 0;
var athis = '';

$(".tablinks").on("click", function() {
  $('.tablinks:has(i)').not(this).click();
  var id = $(this).attr('rel');
  athis = $(this);
  $(this).addClass('active');

  if (flag == 0) {
    text = $(this).text();
    $(this).html('<i class="fas fa-times"></i>');
    $('.tabcontent').hide();
    $('#' + id).slideDown();
    flag = 1;
  } else {
    athis.html(text);
    $('#' + id).slideUp();
    flag = 0;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" rel="a">Are you interested</button>
  <button class="tablinks" rel="b">Call Us</button>
  <button class="tablinks" rel="c">Followus</button>
</div>

<div id="a" class="tabcontent">
  <h3>Are you interested</h3>
</div>

<div id="b" class="tabcontent">
  <h3>Contact us</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="c" class="tabcontent">
  <h3>Follow us</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>