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

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

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

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

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

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

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

▽最新の回答へ

1 ● ヨネちゃん
●50ポイント

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>

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

2 ● Cherenkov
●250ポイント ベストアンサー

こんな感じでどうでしょう。
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();
}
});

marchangさんのコメント
ご回答ありがとうございます!ローカルでは問題なく動きました! ただ実際にはpage1.htmlなどの静的なhtmlではなく、「?mode=f」のようにURLがなってしまい、ページの名前がそれぞれのページで変わってしまいます。 (例:http://ドメイン.net/?mode=f1や、http://ドメイン.net/?mode=cate&cbid=456など。) http://ドメイン.net/ページ名 ↑ この「ページ名」の部分を照合してカレント表示させる場合は どういった書きかたになるでしょうか?

marchangさんのコメント
共通のURLは「?mode=」から始まり、ページ名で使われる文字は「?」、「&]、「=]と英数字でした。マッチする部分を変えたりしてトライしてみます!

Cherenkovさんのコメント
ページ名の例をいくつか提示すれば誰かが答えてくれるかも

marchangさんのコメント
いろいろ試してみた結果、URLの方に、pagenameの変数を追加することで解決しました! ありがとうございました〜☆
関連質問

●質問をもっと探す●



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