人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

曜日ごとにタブ切り替えを自動でおこなう方法

HPで曜日ごとに自動でタブを切り替える方法などありますでしょうか?

現在、Javascriptを使い曜日の取得をおこなっております。
またその曜日ごとに合わせたタブを作り、タブの内容を曜日ごとに分けております。

日付は1週間毎自動で取得しますが、タブが一定の曜日を選択した状態で固定されてしまっています。(水曜日にサイトを訪問しても月曜日のタブが選択されている状態。)

こちらを曜日に合わせたタブを自動で選択するように出来ますでしょうか?(水曜日にサイトを訪問したら最初から水曜日のタブが選択されている状態。)

できればPHPなどは使わず、JavaScriptで実装したいと考えております。
参考のサイトなども教えて頂けますと幸いです。
皆様どうぞよろしくお願いいたします。


●質問者: ytk141
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● なむうぉんす

タブをどのそうな形で実装されているかで回答が変わります。差し支えがなければ、曜日毎のタブを作成しているスクリプトをご教授下さい。


ytk141さんのコメント
ご回答ありがとうございます! 現在下記ページのようなかたちで、曜日取得、タブの切替をしております。 http://sample.ul-inc.jp/ この状態で、曜日ごとに自動でタブの切替を行いたいです。 水曜日に訪問したら、既に水曜日のタブが選択・表示されている状態です。 よろしくお願いします。

質問者から

現在下記ページのようなかたちで、曜日取得、タブの切替をしております。

http://sample.ul-inc.jp/


この状態で、曜日ごとに自動でタブの切替を行いたいです。
水曜日に訪問したら、既に水曜日のタブが選択・表示されている状態。


2 ● なむうぉんす
function wtWeek(d) {
 $(".content_wrap").addClass('disnon');
 d.setDate(d.getDate()+1-d.getDay()); // 今週の日曜日へ移動
 w=new Date(d); // 表示週を保存
 document.all("ym").innerHTML=d.getFullYear()+"/"+(d.getMonth()+1); // 日曜の年月
 for(var i=0;i<7;i++) { // 一週間分
 document.all("wd"+eval(i)).innerHTML=( d.getMonth()+1 + "月" + d.getDate() + "日") ; // 日をセット
 if (d.getDate() == (new Date()).getDate()) {$(".content_wrap").eq(i).removeClass('disnon')};
 d.setDate(d.getDate()+1);
 } // 翌日セット
}

で表示できます。実際には、new Date()は適当な場所で生成して下さい。


ytk141さんのコメント
回答ありがとうございます! 無事解決できました!

3 ● a-kuma3
ベストアンサー

先頭の方にある jQuery のコードの辺りに追記してみました。

<script type="text/javascript"> 
//<![CDATA[
$(function() {
 $("#tab li").click(function() {
 var num = $("#tab li").index(this);
 $(".content_wrap").addClass('disnon');
 $(".content_wrap").eq(num).removeClass('disnon');
 $("#tab li").removeClass('select');
 $(this).addClass('select')
 });

 // ★ここに入れてみた
 var index = new Date().getDay() - 1;
 if (index < 0) {
 index += 7;
 }
 $("#tab li").eq(index).trigger("click");
});
//]]>
</script> 

ytk141さんのコメント
回答ありがとうございます! こちらの方法で無事解決できました!

a-kuma3さんのコメント
追加したコードは、タブをクリックする動作を javascript でやってみた、という感じのコードです。 英語は読まなくても、サンプルソースだけ追ってれば、雰囲気は分かるはず。 http://api.jquery.com/trigger/ どうしても日本語で、ってことであれば、こちらなど。 http://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/ でも、内容が古いので、できれば本家のドキュメントを当たった方が良いです。

ytk141さんのコメント
参考サイトありがとうございます。 是非参考にさせていただきたいと思います!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ