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

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

<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

Sagar和以下是您从jQuery开始的示例。这很简单，我使用了JavaScript对象＆＃34; Date＆＃34;。我已经修改了前2或3天的代码，您需要自己进行更改。如果您尝试修复其余代码，那就太好了。

＆＃13;

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();
});

＆＃13;

.tabcontent {
  display: none;
}

＆＃13;

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

＆＃13;

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

预先根据日期选择标签并显示其内容

3 个答案: