预先根据日期选择标签并显示其内容 [英] Pre select the Tab according to Day and show its contents

问题描述

我需要显示当天的标签，而无需手动选择标签。
即如果今天是星期一显示星期一的内容。

I need to show the tab of the current day without selecting the tab manually. i.e. If today is Monday show the Contents of Monday.

现在我正在使用以下代码，现在可以在任何情况下选项卡1（Sun）显示。

I'm using following code now, where, for now, at any conditions tab 1 (Sun) is visible.

 <div class="tab" style="margin-top: 1.6%;">
  <button class="tablinks" onclick="openCity(event, 'Sun0')">Sun</button>
  <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>
  <button class="tablinks" onclick="openCity(event, 'Tue0')">Tue</button>
  <button class="tablinks" onclick="openCity(event, 'Wed0')">Wed</button>
  <button class="tablinks" onclick="openCity(event, 'Thu0')">Thu</button>
  <button class="tablinks" onclick="openCity(event, 'Fri0')">Fri</button>

代码：

Code:

document.getElementsByClassName('tablinks').click()
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";
}

这里我有一些内容我想在Tab处于活动状态时显示，因为页面加载为

and here I have contents that I would like to show when Tab is active and as the page loads are

<div id="Sun0" class="tabcontent">

<!--Sunday-->
<div style="overflow-x:auto;">
  <p> Contents of Sun0 </p>
</div>

<div id="Mon0" class="tabcontent">

<!--Monday-->
<div style="overflow-x:auto;">
 <p> Contents of Sun0 </p>
</div>

<div id="Tue0" class="tabcontent">

<!--Tueday-->
<div style="overflow-x:auto;">
 <p> Contents of Sun0 </p>
</div>

<div id="Wed0" class="tabcontent">

<!--Wenesday-->
<div style="overflow-x:auto;">
 <p> Contents of Sun0 </p>
</div>

<div id="Thu0" class="tabcontent">

 <!--Thursday-->
<div style="overflow-x:auto;">
 <p> Contents of Sun0 </p>
</div>

<div id="Fri0" class="tabcontent">

<!-Friday-->
<div style="overflow-x:auto;">
 <p> Contents of Sun0 </p>
</div>

推荐答案

<style>
 .active { background: red }
</style>
<div class="tab" style="margin-top: 1.6%;">
  <button class="tablinks" onclick="openCity(event, 'Sun0')">Sun</button>
  <button class="tablinks" onclick="openCity(event, 'Mon0')">Mon</button>
  <button class="tablinks" onclick="openCity(event, 'Tue0')">Tue</button>
  <button class="tablinks" onclick="openCity(event, 'Wed0')">Wed</button>
  <button class="tablinks" onclick="openCity(event, 'Thu0')">Thu</button>
  <button class="tablinks" onclick="openCity(event, 'Fri0')">Fri</button>
  <button class="tablinks" onclick="openCity(event, 'Sat0')">Sat</button>
</div>
<div id="log"></div>
<script>
  function openCity(evt, cityName, today) {
    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";
    if(typeof today == 'undefined') {
      evt.currentTarget.className += " active";
    }
    else {
      tablinks[today].className += " active";
    }
  }

  window.onload = function() {
    var days = ['Sun0', 'Mon0', 'Tue0', 'Wed0', 'Thu0', 'Fri0', 'Sat0'];
    var now = new Date();
    var today = now.getDay();  // returns a number.  0=Sunday, 1=Monday, ...
    openCity(null, days[today], today);
  }
</script>
<div id="Sun0" class="tabcontent">
  <div style="overflow-x:auto;">
    <p> Contents of Sun0 </p>
  </div>
</div>
...

这篇关于预先根据日期选择标签并显示其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！