激活选项卡基于一天的一周

Activate tab based on day of the week

本文关键字：一天 一周 选项 于一天 激活      更新时间：2023-09-26

我已经在论坛上搜索了相关的线程，但是我遇到的解决方案不起作用。

我使用Bootstrap来显示一个包含两个选项卡的选项卡组。我需要Tab 1从周一到周五自动激活，Tab #2从周六到周日自动激活。

这是我的HTML:

 <ul class="cat_filter nav nav-tabs right" role="tablist">
  <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab #1</a></li>
  <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab #2</a></li>
  </ul>
<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane fade in active woocommerce">Some content</div>     
  <div id="tab2" role="tabpanel" class="tab-pane fade woocommerce">Some content</div>    
</div>

我已经尝试了以下线程，但他们不适合我:工作日jQuery UI标签打开在当前的日子在accordion gallery中加载正确的星期

请尝试以下操作:

<?php if(date('l') == 'saturday' || date('l') == 'sunday'){ //l is smallcase L not number 1
  $day = 'tab2';   
  }else{
  $day = 'tab1';
}
?>
<ul class="cat_filter nav nav-tabs right" role="tablist">
  <li role="presentation" class="<?php if($day == 'tab1'){echo 'active';}?>"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab #1</a></li>
  <li role="presentation" class="<?php if($day == 'tab2'){echo 'active';}?>"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab #2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" role="tabpanel" class="tab-pane fade in active woocommerce">Some content</div>     
  <div id="tab2" role="tabpanel" class="tab-pane fade woocommerce">Some content</div>    
</div>

这是javascript和jquery的替代解决方案。我们首先识别日指数，如果是0(星期日)或6(星期六)则激活Tab 1，否则激活Tab 2。见此处

$(function(){
    var today =  new Date()
    var todayIdx = today.getDay();
    console.log('today:', todayIdx);
    if (todayIdx == 0 || todayIdx == 6) {
        $('a[aria-controls="tab1"]').closest('li').addClass('active');
        $('a[aria-controls="tab2"]').closest('li').removeClass('active');
    }
    else {
        $('a[aria-controls="tab2"]').closest('li').addClass('active');
        $('a[aria-controls="tab1"]').closest('li').removeClass('active');
    }
});
相关文章：