javascript - 如何自动切换标签

Question

在这里，我显示带有基本数据的选项卡。每当我单击下一个选项卡按钮时，它都会转到下一个选项卡。

任何人都可以帮助我如何在几秒钟后自动切换标签，例如前 30 秒 tab1，下一个 30 秒 tab2 - 在 tab2 之后它应该来到 tab1

function openPage(pageName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var updatedTime = document.lastModified;
document.getElementById("time1").innerHTML = updatedTime;
document.getElementById("time2").innerHTML = updatedTime;

* {
  box-sizing: border-box
}


/* Set height of body and the document to 100% */

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}


/* Style tab links */

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}


/* Style the tab content (and add height:100% for full page content) */

.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {
  background-color: red;
}

#News {
  background-color: green;
}

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  <div class="footer">
    <p>Last Updated On : <span id="time1"></span><br>
      <p>Software Version</p>
  </div>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
  <div class="footer">
    <p>Last Updated On : <span id="time2"></span><br>
      <p>Software Version</p>
  </div>
</div>

标签： javascripthtmljquery

Answer 1

你是这个意思？

如果有人单击任何选项卡以防他们想留在上面，我可能会清除超时

function openPage(pageName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

window.addEventListener("load", function() {

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

  const tabs = document.querySelectorAll(".tablink");
  let cnt = 0;
  for (let i = 0; i < tabs.length; i++) {
    if (tabs[i].id === "defaultOpen") {
      cnt = i;
      break;
    }
  }
  tabs[cnt].click(); // clicks defaultOpen first time
  const tId = setInterval(function() {
    cnt++;
    if (cnt >= tabs.length) cnt = 0;
    tabs[cnt].click();
  }, 3000);

  const lmID = setInterval(function() {
    var updatedTime = document.lastModified;
    document.getElementById("time1").innerHTML = updatedTime;
    document.getElementById("time2").innerHTML = updatedTime;
  },1000)  
})

* {
  box-sizing: border-box
}


/* Set height of body and the document to 100% */

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}


/* Style tab links */

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}


/* Style the tab content (and add height:100% for full page content) */

.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {
  background-color: red;
}

#News {
  background-color: green;
}

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  <div class="footer">
    <p>Last Updated On : <span id="time1"></span><br>
      <p>Software Version</p>
  </div>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
  <div class="footer">
    <p>Last Updated On : <span id="time2"></span><br>
      <p>Software Version</p>
  </div>
</div>