根據日期選擇標籤，並顯示其內容

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> 

代碼：

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

，在這裏我有我想顯示內容時標籤被激活，並在頁面加載是

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

Answer 1

薩格爾， 這裏是例子讓你從jQuery開始。這很簡單，我使用JavaScript對象「日期」。我已經修復了前兩天或三天的代碼，您需要自行更改。如果您嘗試修復其餘代碼將會很好。

var _today = new Date(); 
 
var _day = _today.getDay(); 
 
switch (_day) { 
 
    case 1: 
 
    $('#Mon0').toggle(); 
 
    break; 
 
    case 2: 
 
    $('#Tue0').toggle(); 
 
    break; 
 
    // you can keep on adding your case 
 
} 
 

 
$('.tablinks').click(function() { 
 
    var $target = $(this).data('target'); 
 
    $('.tabcontent').hide(); 
 
    $($target).toggle(); 
 
});

.tabcontent { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab" style="margin-top: 1.6%;"> 
 
    <button class="tablinks" data-target="#Sun0">Sun</button> 
 
    <button class="tablinks" data-target="#Mon0">Mon</button> 
 
    <button class="tablinks" data-target="#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="Sun0" class="tabcontent"> 
 

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

 
</div> 
 

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

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

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

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

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

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

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

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

 
</div> 
 

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

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

Answer 2

你可以把這段代碼腳本代碼

var currCity = new Date().toString().split(' ')[0]; 
document.getElementById(currCity+"0").style.display = "block"; 

請小提琴檢查這個代碼https://jsfiddle.net/x3ckk63b/1/

Answer 3

<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> 
...