タブ切り替えを自動化し時間設定をつけたい

Question

前回こちらで質問させて頂き解決したのですが、問題がまた浮上してきましてまたご質問させてください。
商品の紹介ページで４日の商品・５日の商品・６日の商品…をタブで切り替えで閲覧できるようになっています。

５日の１８時がきたら→５日のtab_btn　と　tab_panelを表示させ、他の日にちのボックスを非表示
6日の１８時がきたら→６日のtab_btn　と　tab_panelを表示させ、他の日にちのボックスを非表示
の仕組みです。

これをjava Scriptで自動化させたいのですが、記述の仕方がわかりません。
前回質問させて頂いた時に毎日１８時がきたら切り替わるように改良して頂きましたが、
２・３日おきの更新もありますので時間日にちを詳細に設定したいです。

【○日18時に、tab_btnとtab_panelのクラス名にactiveを追加して、他の日付を非表示に】
【△日18時に、tab_btnとtab_panelのクラス名にactiveを追加して、他の日付を非表示に】
と細かく指定したいです。
どうかお力を貸してください。宜しくお願い致します。

<style>
.tab_box .tab_panel {
    display:none;
}

.tab_box .tab_panel.active {
    display:block;
}

.tab_box .btn_area {
    margin-top: 0;
    margin-left: 0px;
    margin-bottom: 0;
    display: -webkit-box;
    display: flex;
}
</style>


<div class="tab_box">
  <div class="btn_area">
   <p class="tab_btn  active">11/4<br>発売</p>
   <p class="tab_btn">11/5<br>発売</p>
   <p class="tab_btn">11/6<br>発売</p>
   <p class="tab_btn">11/7<br>発売</p>
   <p class="tab_btn">11/8<br>発売</p>

      </div>

   <div class="panel_area">

 <!--★★★ 11/4商品★★★-->
<div class="tab_panel active">
その日の内容 
</div>

 <!--★★★ 11/5商品★★★-->
<div class="tab_panel ">
その日の内容 
</div>

 <!--★★★ 11/6商品★★★-->
<div class="tab_panel ">
その日の内容 
</div>

</div>

</div>

<script>
  $('.tab_box .tab_btn').click(function() {
	var index = $('.tab_box .tab_btn').index(this);
	$('.tab_box .tab_btn, .tab_box .tab_panel').removeClass('active');
	$(this).addClass('active');
	$('.tab_box .tab_panel').eq(index).addClass('active');
});
</script>

Comments

[Lhankor_Mhy]

その指定はどういうデータで設定されているのですか？

[karou_haru]

その指定をするjava scriptの記述方法がわからないので、質問させて頂きました
これで答えになってますでしょうか？

[Lhankor_Mhy]

うーん……
なんというか、ご質問があいまいなので、入力を見れば「どうしたい」というのが想像つくかな、と思ったんですよね。
とりあえず適当にやってみますか。

[karou_haru]

説明が下手ですみません。
ざっくりいうと○日の18時に、該当の内容のクラス名にactiveを追加する、を手動でやっていたので、これを自動化したいのです。

[Lhankor_Mhy]

前の質問に回答した者です。それは理解してますよ。

Answer 1

こんな感じでしょうか。
days.jsを使っています。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/ecau7k1j/1/

var setting = [
    {
        start: '2021-11-04 18',
        end: '2021-11-05 18',
        day: '11/4'
    },
    {
        start: '2021-11-05 18',
        end: '2021-11-06 18',
        day: '11/5'
    },
    {
        start: '2021-11-06 18',
        end: '2021-11-08 18',
        day: '11/6'
    },
]

dayjs.extend(window.dayjs_plugin_isBetween)

setting.forEach(x => {
    if (dayjs().isBetween(dayjs(x.start, 'YYYY-MM-DD HH'), dayjs(x.end, 'YYYY-MM-DD HH'))) {
        $('.tab_box .tab_btn:contains("' + x.day + '")').click()
    }
})