カレント表示で悩んでいます。
下記のようにタブを作成しました。(←ちょっとテストページを用意しました。)
http://marchang.org/tab_test/
リストのリンクをクリックしてページが遷移すると、
現在のURLを取得して、リストa要素をカレント表示させることはできないでしょうか?
例えば、「タブ2」の「ページ4」をクリックして飛んだ先のpage4.htmlでは、
「タブ2」の方が開いた状態になり、「ページ4」というテキストがマークされるいった感じです。
「現在のURLを取得して、リストのa要素にはclass="current"を付け、
そのa要素がある親divは開く」までは考えてみたのですが、コードが上手くかけませんでした。
こちら何か良い方法はないでしょうか?
こんな感じでどうでしょう。
urlの/pageX.htmlからpageXを抜き出して、それをhrefに持つa要素を探して、タブと同じようにインデックスを取得してクリック。
tab.js
$(function() { $("#tab li").click(function() { var num = $("#tab li").index(this); $(".test_box").hide(); $(".test_box").eq(num).fadeIn(); $("#tab li").removeClass('active'); $(this).addClass('active') }); var pageName = location.href.match(/\/(page\d+)/i); if (pageName) { pageName = pageName[1]; var a = $('.page_list a[href*="' + pageName + '.html"]') .addClass('active').css({backgroundColor:'pink'}); var tabIndex = a.closest('.test_box').index(); $("#tab li").eq(tabIndex).click(); } });
http://vp.cool-music.org/test/tab_test/
通常は各HTML(page1~page6)の記述をそれぞれ変えればOKなのですが、ページが沢山あると面倒ですよね。
用途や目的が良く分からないのですが、各ファイルをPHPにして変数を受け渡すというのはどうでしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="./css/reset.css" type="text/css" /> <link rel="stylesheet" href="./css/common.css" type="text/css" /> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./js/tab.js"></script> <?php $t = $_GET["t"]; if ($t == 1) { $tab1 = " class=\"active\""; $tab1class = "test_box"; $tab2class = "test_box displaynone"; } if ($t == 2) { $tab2 = " class=\"active\""; $tab2class = "test_box"; $tab1class = "test_box displaynone"; } $p = $_GET["p"]; if ($p == 1) {$current1 = " class=\"current\"";} if ($p == 2) {$current2 = " class=\"current\"";} if ($p == 3) {$current3 = " class=\"current\"";} if ($p == 4) {$current4 = " class=\"current\"";} if ($p == 5) {$current5 = " class=\"current\"";} if ($p == 6) {$current6 = " class=\"current\"";} ?> <title>タブのテストページ</title> </head> <body> <div id="content"> <ul id="tab"> <li<?=$tab1?>><span>タブ1</span></li> <li<?=$tab2?>><span>タブ2</span></li> </ul> <div class="tab_content"> <div class="<?=$tab1class?>"> <ul class="page_list" id="tab1"> <li<?=$current1?>><a href="./page1.html">ページ1</a></li> <li<?=$current2?>><a href="./page2.html">ページ2</a></li> <li<?=$current3?>><a href="./page3.html">ページ3</a></li> </ul> </div> <div class="<?=$tab2class?>"> <ul class="page_list" id="tab2"> <li<?=$current4?>><a href="./page4.html">ページ4</a></li> <li<?=$current5?>><a href="./page5.html">ページ5</a></li> <li<?=$current6?>><a href="./page6.html">ページ6</a></li> </ul> </div><!--tab_content_end--> </div><!--tab_content_end--> </body> </html>
ご回答ありがとうざございます!
状況が分かりづらく申し訳ないです。
レンタルカートのサービスをカスタムしていまして、最終的にPHPが追加できないようになっていました><
せっかく書いていただいたのにすみません。
こんな感じでどうでしょう。
urlの/pageX.htmlからpageXを抜き出して、それをhrefに持つa要素を探して、タブと同じようにインデックスを取得してクリック。
tab.js
$(function() { $("#tab li").click(function() { var num = $("#tab li").index(this); $(".test_box").hide(); $(".test_box").eq(num).fadeIn(); $("#tab li").removeClass('active'); $(this).addClass('active') }); var pageName = location.href.match(/\/(page\d+)/i); if (pageName) { pageName = pageName[1]; var a = $('.page_list a[href*="' + pageName + '.html"]') .addClass('active').css({backgroundColor:'pink'}); var tabIndex = a.closest('.test_box').index(); $("#tab li").eq(tabIndex).click(); } });
ページ名の例をいくつか提示すれば誰かが答えてくれるかも
いろいろ試してみた結果、URLの方に、pagenameの変数を追加することで解決しました!
ありがとうございました~☆
ページ名の例をいくつか提示すれば誰かが答えてくれるかも
2012/10/16 18:57:10いろいろ試してみた結果、URLの方に、pagenameの変数を追加することで解決しました!
2012/10/16 23:27:28ありがとうございました~☆