毎日１８時に表にするタブを切り替えたいです

前提・実現したいこと

初めて質問させて頂きます。
あるショッピングサイトのページを担当することになりましたが、既存のタブ切り替え部分を、時間がきたら自動で切り替えできるようにしたいです。
tab_boxはタブ部分、panel_areaは商品掲載部分です。
activeがclassに入っていたら表示されます。

毎日18時に手動更新しているのですが休業日の更新もあるので自動で切り替えられれば…と思っています。

現状)
9/5 18時は

<p class="tab_btn">9/5<br>発売</p>　部分と <div class="tab_panel">　（9/5発売の商品が並ぶ） </div> にactiveを追加する

9/6 18時は

<p class="tab_btn">9/6<br>発売</p>　部分と <div class="tab_panel">　（9/6発売の商品が並ぶ） </div> にactiveを追加する

という更新を手動で行っています。
何卒。お力をお貸し下さい。

該当のソースコード

  </div>

<div class="panel_area"> <div class="tab_panel active"> 　　　　　　　　　　　（9/4発売の商品が並ぶ） </div> <div class="tab_panel"> 　　　（9/5発売の商品が並ぶ） </div> <div class="tab_panel"> 　　　（9/6発売の商品が並ぶ） </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>

試したこと

時間別に表示してくれる View_timerで試してみましたがタブが表示されなくなり、日付もどんどん増えたり減ったりするので管理が難しいです。

補足情報（FW/ツールのバージョンなど）

質問頂きましたので補足します。（ありがとうございますー！）
※商品が並んでいる部分は事前に入力済みです。
※お客様に自由に閲覧してほしいので、「activeではないタブ」の内容は表示させたままです。
4日の18時▶４日のタブをトップに表示（他の日付の内容も閲覧可）
5日の18時▶５日のタブをトップに表示（他の日付の内容も閲覧可）
簡単にかくと、
手動でやっていた「18時にその日の内容をトップに表示させる」作業を自動化させたいです。
宜しくお願いします。

kei344

2021/10/05 04:50

（質問文は編集できます）質問タグが「Java」になっていますが、「JavaScript」の間違いではないでしょうか。もし「Java」で問題が無いなら出力部分のコードを提示することをお勧めします。

karou_haru

2021/10/05 05:14

本当ですね、javascriptで入力したつもりだったんですが！教えていただきありがとうございます修正します！

Lhankor_Mhy

2021/10/05 05:32

10/11は休みなので、「（10/10発売の商品が並ぶ）」「（10/11発売の商品が並ぶ）」の部分をあらかじめ入力しておいて、出勤しなくても10/11の18時になったら自動表示されるようにしたい、みたいな話ですか？また、その場合、10/11の商品は10/11の18時以前に見えてしまってもかまわないですか？

karou_haru

2021/10/05 05:46

質問有難うございます！！タブの内容は全ての日付の分、全て入力済みで、他の日付のタブを押せば自由に他の日付の内容もチェックできます。むしろ見えてほしいです。 10日の18時▶10日のタブをトップに表示（他の日付の内容も閲覧可） 11日の18時▶11日のタブをトップに表示（他の日付の内容も閲覧可）手動でやっていた「18時にその日の内容をトップに表示させる」作業を自動化させたいです。すみません説明不足で。

Lhankor_Mhy

2021/10/05 05:52

18時は見る人のタイムゾーンになりますがよろしいですか？たとえば、ツバル時間で設定されているPCで見ると日本時間15時で表示が切り替わる感じでも構いませんか？

karou_haru

2021/10/05 05:59

質問有難うございます！ざっくり言って楽天yahoo等のショッピングモールの日本の女性向けのショッピングサイトですので、日本以外からの閲覧を想定しておりません。ですので１８時切り替えが理想です！

行動規範の内容に同意します

回答2件

ベストアンサー

サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/ecau7k1j/

js
1var date = new Date();
2date.setHours(date.getHours() - 18);
3var dateText = date.toLocaleDateString('en', { month: 'numeric', day: 'numeric' });
4
5$('.tab_box .tab_btn:contains("'+dateText+'")').click();