タブのカレント表示について教えてください。


カレント表示で悩んでいます。

下記のようにタブを作成しました。(←ちょっとテストページを用意しました。)
http://marchang.org/tab_test/

リストのリンクをクリックしてページが遷移すると、
現在のURLを取得して、リストa要素をカレント表示させることはできないでしょうか?
例えば、「タブ2」の「ページ4」をクリックして飛んだ先のpage4.htmlでは、
「タブ2」の方が開いた状態になり、「ページ4」というテキストがマークされるいった感じです。

「現在のURLを取得して、リストのa要素にはclass="current"を付け、
そのa要素がある親divは開く」までは考えてみたのですが、コードが上手くかけませんでした。
こちら何か良い方法はないでしょうか?

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/10/16 23:29:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493

ポイント250pt

こんな感じでどうでしょう。
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();
	}
});
他2件のコメントを見る
id:Cherenkov

ページ名の例をいくつか提示すれば誰かが答えてくれるかも

2012/10/16 18:57:10
id:jyusi-hyouhon

いろいろ試してみた結果、URLの方に、pagenameの変数を追加することで解決しました!
ありがとうございました~☆

2012/10/16 23:27:28

その他の回答1件)

id:yoneto164 No.1

回答回数813ベストアンサー獲得回数94

ポイント50pt

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>
id:jyusi-hyouhon

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

状況が分かりづらく申し訳ないです。
レンタルカートのサービスをカスタムしていまして、最終的にPHPが追加できないようになっていました><
せっかく書いていただいたのにすみません。

2012/10/16 15:57:55
id:Cherenkov No.2

回答回数1504ベストアンサー獲得回数493ここでベストアンサー

ポイント250pt

こんな感じでどうでしょう。
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();
	}
});
他2件のコメントを見る
id:Cherenkov

ページ名の例をいくつか提示すれば誰かが答えてくれるかも

2012/10/16 18:57:10
id:jyusi-hyouhon

いろいろ試してみた結果、URLの方に、pagenameの変数を追加することで解決しました!
ありがとうございました~☆

2012/10/16 23:27:28

コメントはまだありません

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

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

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

回答リクエストを送信したユーザーはいません