在 Chrome 中几秒钟后选项卡会变回第一个选项卡

Posted 2023-03-05

【中文标题】在 Chrome 中几秒钟后选项卡会变回第一个选项卡

【英文标题】：tabs change back to first tab after a few seconds in Chrome

【发布时间】：2018-05-10 22:42:38

【问题描述】：

我的页面上有 5 个标签。它设置为在页面加载时打开到第一个选项卡。当我在几秒钟后单击其他选项卡时，它再次变回第一个选项卡。它应该停留在被点击的选项卡上，直到点击其他内容，而不是返回到第一个选项卡。

它适用于Firefox，但不适用于Chrome 和Safari。

网址是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();
 ;

请帮忙！！！我很感激！！

【问题讨论】：

什么叫openCity()？

我不太了解javascript，所以这是我从w3c 网站获得的代码，我只是没有更改他们使用的一些名称。 html是这个-

哎呀 - 捐赠现在就有所作为。这用于第一个标签

【参考方案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>

【讨论】：

在完成所有这些之后，我肯定会推荐使用像 bootstrap 或 jQuery 这样的库来让你更轻松。特别是如果您刚开始使用 javascript。