javascriptで制御されているタブパネルの初期表示を前ページからの条件指定で動的に変更したい
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 1,461
Bootstrap のタブナビゲーションで(というかよくあるjavascript制御のタブ表示)で別ページから表示したいタブの情報を渡すことは出来ないでしょうか?
ちょっと説明が下手かもしれなくて大変恐縮なのですが、
本来タブを選択して表示を切り替えるページに、前のページからタブのIDか何かを渡して最初から前のページで選択した条件に当てはまるタブに表示を切り替えたい
という質問なのですが、伝わりますでしょうか。
1ページ目
ボタンがいくつか並んでいる選択ページ
ここで情報を選択
A.htmlファイル
<p><a href="B.html">「あ」を見る</a><p>
<p><a href="B.html">「い」を見る</a><p>
<p><a href="B.html">「う」を見る</a><p>
2ページ目
タブで表示を切り替える情報ページ
Aで選択した情報を初期表示させたい
B.htmlファイル
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1">あ</a></li>
<li><a href="#tab2">い</a></li>
<li><a href="#tab3">う</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Tab1 Content</div>
<div class="tab-pane" id="tab2">Tab2 Content</div>
<div class="tab-pane" id="tab3">Tab3 Content</div>
</div>
ちなみに使っているのはブートストラップのタブナビゲーションです。
私の知識ですと
B.htmlのタブはclass="activ"を付けると初期表示されるのでphpでAからBへ情報渡して、B.htmlの
<li>と<div>に全部ifを書く、といった方法しか思いつけません。
こんなしょぼくて面倒なやり方ではなくもうちょっとスマートなやり方があると思うのですが、ご存知の方いらしゃいましたらお願いいたします。
下記が私の知識の限界の解決策です。
A.html
<p><a href="B.html?a">「あ」を見る</a><p>
<p><a href="B.html?b">「い」を見る</a><p>
<p><a href="B.html?c">「う」を見る</a><p>
B.htmlファイル
<ul class="nav nav-tabs">
<li <?php if(isset($_GET['a'])) { echo 'class="active"'; } ?>><a href="#tab1">あ</a></li>
<li <?php if(isset($_GET['b'])) { echo 'class="active"'; } ?>><a href="#tab2">い</a></li>
<li <?php if(isset($_GET['c'])) { echo 'class="active"'; } ?>><a href="#tab3">う</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane <?php if(isset($_GET['a'])) { echo 'active'; } ?>" id="tab1">Tab1 Content</div>
<div class="tab-pane <?php if(isset($_GET['b'])) { echo 'active'; } ?>" id="tab2">Tab2 Content</div>
<div class="tab-pane <?php if(isset($_GET['c'])) { echo 'active'; } ?>" id="tab3">Tab3 Content</div>
</div>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
せめて、if文の部分を関数化すればスマートになるかと。
または、jqueryを使うと、n番目の要素とかを割と簡単に選択できるので、ロード時にn番目の要素のclassにactiveを付ける。という感じで書けば汎用的になりそうですね。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
スマートなやり方があると思うのですが
テンプレートエンジンくらいしか思いつかないですね。
【[W] PHPテンプレートエンジンまとめ 一覧と構文例 | Work Tool Smith [ワークツールスミス]】
http://worktoolsmith.com/2012/02/phpテンプレートエンジンまとめ-一覧と構文例/
【2015年版PHPのテンプレートエンジン調査 | IT起業アカデミア】
http://web-academia.org/it_business_web_development/プログラミング/1199/
li
の数が多かったり変数の数が多い場合は sprintf
を使うと思います。
$lis = array( 'tab1' => 'あ'
, 'tab2' => 'い'
, 'tab3' => 'う'
);
foreach ( $lis as $tab => $val ) {
$html .= sprintf( '<li%1$s><a href="#%2$s">%3$s</a></li>%4$s'
, /* %1$s */ ( isset( $_GET[ $tab ] ) ) ? ' class="active"' : ''
, /* %2$s */ $tab
, /* %3$s */ $val
, /* %4$s */ "\n"
);
}
if ( empty( $html ) ) {
printf( '<ul class="nav nav-tabs">%2$s%1$s</ul>%2$s', $html, "\n" );
};
【PHP: sprintf - Manual】
http://php.net/manual/ja/function.sprintf.php
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる