预先根据日期值检查单选按钮

Question

我已将内容分配给少数单选按钮，单击该按钮时将显示其内容。我想根据日期预先检查标签按钮。

例如。如果今天是Sun，那么在页面加载时它将显示星期日的内容，如果它是星期二，那么在页面加载时它将显示星期二的内容。

我的代码如下：

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 15px;
  font-family: Open Sans;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -11px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: #888;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
  display: none;
  border-top: 1px solid #bbb;
  padding: 15px;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
  display: block;
  box-shadow: 0 0 15px #939393;
}

<div class="tabinator">

  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Sunday</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Monday</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tuesday</label>
  <input type="radio" id="tab4" name="tabs">
  <label for="tab4">Wednesday</label>
  <input type="radio" id="tab5" name="tabs">
  <label for="tab5">Thursday</label>
  <input type="radio" id="tab6" name="tabs">
  <label for="tab6">Friday</label>
  <input type="radio" id="tab7" name="tabs">
  <label for="tab7">Saturday</label>

  <div id="content1">
    <p>
      This is Sunday
    </p>
  </div>
  <div id="content2">
    <p>This is Monday
    </p>
  </div>
  <div id="content3">
    <p>This is Tuesday
    </p>
  </div>
  <div id="content4">
    <p>This is Wednesday
    </p>
  </div>
  <div id="content5">
    <p>This is Thursday
    </p>
  </div>
  <div id="content6">
    <p>
      This is Friday
    </p>
  </div>
  <div id="content7">
    <p>
      This is Saturday
    </p>
  </div>
</div>

Answer 1

所以你可以这样做：

1. 获取当天 - 这与单选按钮列表的索引相匹配 - 因此您可以这样做：

   $('.tabinator input[name=tabs]').eq(new Date().getDay()).prop('checked', true);
   

2. label的一些radio未正确标记 - 也已修复。

如果您想显示明天的标签，可以试试这个：

$('.tabinator input[name=tabs]').eq(new Date().getDay() + 1).prop('checked', true);

见下面的演示：

$(document).ready(function(){
  $('.tabinator input[name=tabs]') // get all tabs
    .eq(new Date().getDay()) // select the current tab
    .prop('checked', true); // check it
});

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 15px;
  font-family: Open Sans;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -11px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: #888;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
  display: none;
  border-top: 1px solid #bbb;
  padding: 15px;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 #tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
  display: block;
  box-shadow: 0 0 15px #939393;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tabinator">

  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Sunday</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Monday</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tuesday</label>
  <input type="radio" id="tab4" name="tabs">
  <label for="tab4">Wednesday</label>
  <input type="radio" id="tab5" name="tabs">
  <label for="tab5">Thursday</label>
  <input type="radio" id="tab6" name="tabs">
  <label for="tab6">Friday</label>
  <input type="radio" id="tab7" name="tabs">
  <label for="tab7">Saturday</label>

  <div id="content1">
    <p>
      This is Sunday
    </p>
  </div>
  <div id="content2">
    <p>This is Monday
    </p>
  </div>
  <div id="content3">
    <p>This is Tuesday
    </p>
  </div>
  <div id="content4">
    <p>This is Wednesday
    </p>
  </div>
  <div id="content5">
    <p>This is Thursday
    </p>
  </div>
  <div id="content6">
    <p>
      This is Friday
    </p>
  </div>
  <div id="content7">
    <p>
      This is Saturday
    </p>
  </div>
</div>