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

【问题标题】：tabs change back to first tab after a few seconds in Chrome在 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是这个-
  • 哎呀 -
    • 。这用于第一个标签

标签： javascript tabs


【解决方案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。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode