Нажатие на любую другую вкладку создает проблему

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>