javascript - 根据日期预选标签

Question

我需要在不手动选择标签的情况下显示当天的标签？即，如果今天是星期一，则显示星期一的内容。 我现在正在使用以下代码，目前，在任何情况下选项卡 1 ( Sun ) 都是可见的。

<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>
</script>
  



  <script>
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";
}
</script>

Answer 1

只需将星期几存储在一个数组中，然后显示与数组中当天索引对应的任何选项卡。

这么简单的操作，JQuery帮不上什么忙。

var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday"];

// Get all the elements as a node list
var tabButtons = document.querySelectorAll(".tablinks");
var tabs = document.querySelectorAll(".dayTab");

// Get today's day as an index (0-6)
var today = new Date().getDay();
tabButtons[today].classList.add("today");
tabs[today].classList.add("today");

/* Do whatever styling you need */
.tablinks { 
  
}

.today {
  background-color:red;
}

.dayTab {
  font-size:.7em;
  display:inline-block;
  width:50px;
  height:200px;
  border:1px solid black;
}

<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>
</div>

<div id="tabArea">
  <div class="dayTab" id="Sunday">Sunday's stuff</div>
  <div class="dayTab" id="Monday">Monday's stuff</div>
  <div class="dayTab" id="Tuesday">Tuesday's stuff</div>
  <div class="dayTab" id="Wednesday">Wednesday's stuff</div>
  <div class="dayTab" id="Thursday">Thursday's stuff</div>
  <div class="dayTab" id="Friday">Friday's stuff</div> 
</div>