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


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

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

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/04/22 23:52:50
  • 終了:2014/04/23 17:35:43

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4583ベストアンサー獲得回数19232014/04/23 15:46:22

先頭の方にある 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> 
他1件のコメントを見る
id:a-kuma3

追加したコードは、タブをクリックする動作を javascript でやってみた、という感じのコードです。
英語は読まなくても、サンプルソースだけ追ってれば、雰囲気は分かるはず。
http://api.jquery.com/trigger/

どうしても日本語で、ってことであれば、こちらなど。
http://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/
でも、内容が古いので、できれば本家のドキュメントを当たった方が良いです。

2014/04/23 17:11:14
id:ytk141

参考サイトありがとうございます。

是非参考にさせていただきたいと思います!

2014/04/23 17:13:38

その他の回答(2件)

id:sasada No.1

sasada回答回数1482ベストアンサー獲得回数1332014/04/23 14:56:01

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

id:ytk141

ご回答ありがとうございます!

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

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

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

よろしくお願いします。

2014/04/23 15:17:23
id:ytk141

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

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


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

id:sasada No.2

sasada回答回数1482ベストアンサー獲得回数1332014/04/23 15:37:30

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()は適当な場所で生成して下さい。

id:ytk141

回答ありがとうございます!

無事解決できました!

2014/04/23 16:48:32
id:a-kuma3 No.3

a-kuma3回答回数4583ベストアンサー獲得回数19232014/04/23 15:46:22ここでベストアンサー

先頭の方にある 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> 
他1件のコメントを見る
id:a-kuma3

追加したコードは、タブをクリックする動作を javascript でやってみた、という感じのコードです。
英語は読まなくても、サンプルソースだけ追ってれば、雰囲気は分かるはず。
http://api.jquery.com/trigger/

どうしても日本語で、ってことであれば、こちらなど。
http://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/
でも、内容が古いので、できれば本家のドキュメントを当たった方が良いです。

2014/04/23 17:11:14
id:ytk141

参考サイトありがとうございます。

是非参考にさせていただきたいと思います!

2014/04/23 17:13:38
  • id:a-kuma3
    タブ表示を、何を使って実装してるか書いた方が、回答が付きやすいと思いますよ。
  • id:standard_one
    できない理由がわからない。
    間違いなくどこかにバグがあるからソース貼ってみるといと思う。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません