вкладки возвращаются к первой вкладке через несколько секунд в Chrome

Question

У меня есть страница с 5 вкладками.Это настройка для открытия первой вкладки при загрузке страницы.Когда я нажимаю на одну из других вкладок через несколько секунд, она снова возвращается к первой вкладке.Он должен оставаться на вкладке, на которую нажимают, до тех пор, пока не будет нажата другая кнопка, не возвращайтесь на первую вкладку.

Она работает в Firefox, но не в Chrome и Safari.

URL-адрес https://vcs.org/donate-now/

Код javascript такой -

 function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
         tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
         tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
 }

 // Get the element with id="defaultOpen" and click on it


 window.onload=function(){
     document.getElementById("defaultOpen").click();
 };

Пожалуйста, помогите !!!Я ценю это!

Answer 1

Итак, вы звоните ...

window.onload = function () {
    document.getElementById("defaultOpen").click();
};

, что затем вызывает другое событие onclick ...

<li>
    <button class="tablinks" onclick="openCity(event, 'Donate')" id="defaultOpen"><a href=""></a><h1>Donate</h1> MAKE A DIFFERENCE NOW</button>
</li>

Я бы порекомендовал установить активный на вкладке по умолчанию, а затемудаление при выборе разных вкладок.Вот быстрый и грязный пример.

var tabLinks = document.getElementsByClassName('tablinks');

function openCity(evt) {
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    if (tabcontent[i].id === evt.target.name) {
      tabcontent[i].style.display = "block";
    } else {
      tabcontent[i].style.display = "none";
    }
  }

  for (let a of tabLinks) {
    a.className = 'tablinks'
  }

  evt.currentTarget.className += ' active';
}


for (let t of tabLinks) {
  t.addEventListener('click', function(event) {
    openCity(event);
  });
}

button.active {
  background-color: lightblue !important;
}

<ul>
  <li>
    <button class="tablinks active" name="defaultOpen"><a href=""></a><h1>Donate</h1> MAKE A DIFFERENCE NOW</button>
  </li>
  <li>
    <button class="tablinks" name="other"><a href=""></a>Other</button>
  </li>
  <ul>

    <div id="defaultOpen" class="tabcontent" style="display:block;">
      defaultOpen content
    </div>

    <div id="other" class="tabcontent" style="display:none;">
      other content
    </div>