Question

我使用标签查看每七个输入的个别内容。一切都运行良好，只有当我点击页面加载时我想要显示的活动输入时才会显示内容。

现在当我加载页面时，如果它是今天星期五，它会突出显示fri输入但是不会显示内部的内容

它是星期五

并且只出现在它被重新点击。所以任何人都可以在页面加载时显示

的内容。

任何帮助都会非常感激。

这是工作

https://jsfiddle.net/BlueYeti/tcqjaetj/1/

和代码段文件

＆＃13;

$('form').on('click', function() {
	
  var day     = $("input[name='tabs']:checked").val(),
			whatDay = $('.day');
	
  whatDay.each(function(i) {
  	$(whatDay[i]).removeClass('active');
    
    if ( $(whatDay[i]).hasClass(day)) {
    $(whatDay[i]).addClass('active');
    	$('.set-day span').text($(this).find('p').text());
    }
  });
});


    $(document).ready(function(){
  $('.tabinator input[name=tabs]') // get all tabs
    .eq(new Date().getDay()) // select the current tab
    .prop('checked', true); // check it
});

＆＃13;

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 1px;
  font-family: Open Sans;
  margin-top: 10px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 0.6%;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
  font-family: courier;
  font-weight: bold;

}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: red;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: red;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  font-size: 22px;
}

.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: 3px;
  margin-top: 2px;
}

#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;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: auto;
    border: 1px solid black;
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    border=0.5;   
 
}

table th {
   text-align: center;
    background-color:   #228B22; 
    color: white; 
    font-weight: bold;
    font-size: 170%;
    border-color : black; 
    border-width: 1.5px;
    border-style: solid;
   ; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);   
   

    
    
  }
    
 table td {
    
    padding-left: 4px;
    font-weight: bold;
    font-size: 110%;

    border-color : black; 
    border-width: 1.5px;
    border-style: solid;
    font-family:  courier;
    color: blue;

text-shadow: 0px 1px 1px #fff;
    
}



tr:nth-child(even){background-color: #f2f2f2}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="tabinator">
  <input type="radio" id="tab1" name="tabs" value='sun' / checked>
    <label for="tab1">SUN</label>
  <input type="radio" id="tab2" name="tabs" value='mon' />
    <label for="tab2">MON</label>
  <input type="radio" id="tab3" name="tabs" value='tue' />
    <label for="tab3">TUE</label>
  <input type="radio" id="tab4" name="tabs" value='wed' />
    <label for="tab4">WED</label>
  <input type="radio" id="tab5" name="tabs" value='thu' />
    <label for="tab5">THU</label>
  <input type="radio" id="tab6" name="tabs" value='fri' />
    <label for="tab6">FRI</label>
  <input type="radio" id="tab7" name="tabs" value='sat' />
    <label for="tab7">SAT</label>
</form>

<h1 class='set-day'><span></span> </h1>

<div id="content1">
<p > This is Sunday</p>
  </div>

  <div id="content2" class='day mon'>
    <p> This is Monday</p>
  </div>

  <div id="content3" class='day tue'>
    <p> This is Tuesday</p>
  </div>

  <div id="content4" class='day wed'>
    <p> This is Wednesday</p>
  </div>
  
  <div id="content5" class='day thu'>
    <p> This is Thursday</p>
  </div>
  
  <div id="content6" class='day fri'\>
    <p> This is Friday</p>
  </div>
  
  <div id="content7" class='day sat' >
    <p> This is Saturday</p>
  </div>

＆＃13;

Answer 1

可以对您的代码进行一些改进：

不要听到冒充到表单的click事件。相反，您只需在输入元素上听取change事件即可。单击标签将切换其检查/取消选中状态，这将触发change事件。
删除循环外的.active类
循环浏览whatDay集合时，您只需使用$(this)代替更详细的$(whatDay[i])
最后，当页面加载时，您只需以编程方式触发change事件，即.trigger('change')，即可在没有任何用户交互的情况下首次运行逻辑。

我做了一些额外的，不太相关的更改：

将class="day sun"添加到星期日内容块
修复了其中一个输入元素

/

不用多说，这是一个概念验证示例：

$('form input[name="tabs"]').on('change', function() {

  var day = $(this).val(),
      whatDay = $('.day');

  // Remove class on all days
  whatDay.removeClass('active');

  // Show the correct day
  whatDay.each(function(i) {
    if ($(this).hasClass(day)) {
      $(this).addClass('active');
      $('.set-day span').text($(this).find('p').text());
    }
  });
});


$(document).ready(function() {
  $('.tabinator input[name=tabs]')  // get all tabs
    .eq(new Date().getDay())        // select the current tab
    .prop('checked', true)          // check it
    .trigger('change');             // Trigger change
});

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 1px;
  font-family: Open Sans;
  margin-top: 10px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 0.6%;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
  font-family: courier;
  font-weight: bold;
}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: red;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: red;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  font-size: 22px;
}

.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: 3px;
  margin-top: 2px;
}

#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;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: auto;
  border: 1px solid black;
  text-indent: 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  border=0.5;
}

table th {
  text-align: center;
  background-color: #228B22;
  color: white;
  font-weight: bold;
  font-size: 170%;
  border-color: black;
  border-width: 1.5px;
  border-style: solid;
  ;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

table td {
  padding-left: 4px;
  font-weight: bold;
  font-size: 110%;
  border-color: black;
  border-width: 1.5px;
  border-style: solid;
  font-family: courier;
  color: blue;
  text-shadow: 0px 1px 1px #fff;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="tabinator">
  <input type="radio" id="tab1" name="tabs" value='sun' />
  <label for="tab1">SUN</label>
  <input type="radio" id="tab2" name="tabs" value='mon' />
  <label for="tab2">MON</label>
  <input type="radio" id="tab3" name="tabs" value='tue' />
  <label for="tab3">TUE</label>
  <input type="radio" id="tab4" name="tabs" value='wed' />
  <label for="tab4">WED</label>
  <input type="radio" id="tab5" name="tabs" value='thu' />
  <label for="tab5">THU</label>
  <input type="radio" id="tab6" name="tabs" value='fri' />
  <label for="tab6">FRI</label>
  <input type="radio" id="tab7" name="tabs" value='sat' />
  <label for="tab7">SAT</label>
</form>

<h1 class='set-day'><span></span> </h1>

<div id="content1" class='day sun'>
  <p> This is Sunday</p>
</div>

<div id="content2" class='day mon'>
  <p> This is Monday</p>
</div>

<div id="content3" class='day tue'>
  <p> This is Tuesday</p>
</div>

<div id="content4" class='day wed'>
  <p> This is Wednesday</p>
</div>

<div id="content5" class='day thu'>
  <p> This is Thursday</p>
</div>

<div id="content6" class='day fri'>
  <p> This is Friday</p>
</div>

<div id="content7" class='day sat'>
  <p> This is Saturday</p>
</div>

Answer 2

在您预选这样的日期时添加.click（）方法：

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

Here is the fiddle

Answer 3

按照您在点击上的操作显示加载内容。这是代码

$('form').on('click', function() {
//moved the code into function called ShowDayContent to prevent duplication
 ShowDayContent();
});

    $(document).ready(function(){
  $('.tabinator input[name=tabs]') // get all tabs
    .eq(new Date().getDay()) // select the current tab
    .prop('checked', true); // check it
    //calling the function here too
    ShowDayContent();
});
  //The code is just copied and pasted. No edits, just to avoid duplication.
  function ShowDayContent() {
     var day     = $("input[name='tabs']:checked").val(),
			whatDay = $('.day');
	
  whatDay.each(function(i) {
  	$(whatDay[i]).removeClass('active');
    
    if ( $(whatDay[i]).hasClass(day)) {
    $(whatDay[i]).addClass('active');
    	$('.set-day span').text($(this).find('p').text());
    }
  });
}

@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
  margin: 0;
  padding: 0;
}

body {
  padding: 2px;
  background: #E5E4E2;
}

.tabinator {
  background: #fff;
  padding: 1px;
  font-family: Open Sans;
  margin-top: 10px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 0.6%;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
  font-family: courier;
  font-weight: bold;

}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: red;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: red;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
  font-size: 22px;
}

.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: 3px;
  margin-top: 2px;
}

#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;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: auto;
    border: 1px solid black;
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    border=0.5;   
 
}

table th {
   text-align: center;
    background-color:   #228B22; 
    color: white; 
    font-weight: bold;
    font-size: 170%;
    border-color : black; 
    border-width: 1.5px;
    border-style: solid;
   ; 
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);   
   

    
    
  }
    
 table td {
    
    padding-left: 4px;
    font-weight: bold;
    font-size: 110%;

    border-color : black; 
    border-width: 1.5px;
    border-style: solid;
    font-family:  courier;
    color: blue;

text-shadow: 0px 1px 1px #fff;
    
}



tr:nth-child(even){background-color: #f2f2f2}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="tabinator">
  <input type="radio" id="tab1" name="tabs" value='sun' / checked>
    <label for="tab1">SUN</label>
  <input type="radio" id="tab2" name="tabs" value='mon' />
    <label for="tab2">MON</label>
  <input type="radio" id="tab3" name="tabs" value='tue' />
    <label for="tab3">TUE</label>
  <input type="radio" id="tab4" name="tabs" value='wed' />
    <label for="tab4">WED</label>
  <input type="radio" id="tab5" name="tabs" value='thu' />
    <label for="tab5">THU</label>
  <input type="radio" id="tab6" name="tabs" value='fri' />
    <label for="tab6">FRI</label>
  <input type="radio" id="tab7" name="tabs" value='sat' />
    <label for="tab7">SAT</label>
</form>

<h1 class='set-day'><span></span> </h1>

<div id="content1">
<p > This is Sunday</p>
  </div>

  <div id="content2" class='day mon'>
    <p> This is Monday</p>
  </div>

  <div id="content3" class='day tue'>
    <p> This is Tuesday</p>
  </div>

  <div id="content4" class='day wed'>
    <p> This is Wednesday</p>
  </div>
  
  <div id="content5" class='day thu'>
    <p> This is Thursday</p>
  </div>
  
  <div id="content6" class='day fri'\>
    <p> This is Friday</p>
  </div>
  
  <div id="content7" class='day sat' >
    <p> This is Saturday</p>
  </div>

在页面加载时显示输入内容

3 个答案: