質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

2362閲覧

javascriptで制御されているタブパネルの初期表示を前ページからの条件指定で動的に変更したい

yoyoyoyogi

総合スコア47

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/05/11 04:10

Bootstrap のタブナビゲーションで(というかよくあるjavascript制御のタブ表示)で別ページから表示したいタブの情報を渡すことは出来ないでしょうか?

ちょっと説明が下手かもしれなくて大変恐縮なのですが、
本来タブを選択して表示を切り替えるページに、前のページからタブのIDか何かを渡して最初から前のページで選択した条件に当てはまるタブに表示を切り替えたい
という質問なのですが、伝わりますでしょうか。

1ページ目
ボタンがいくつか並んでいる選択ページ
ここで情報を選択

A.htmlファイル

html

1 2<p><a href="B.html">「あ」を見る</a><p> 3<p><a href="B.html">「い」を見る</a><p> 4<p><a href="B.html">「う」を見る</a><p> 5

2ページ目
タブで表示を切り替える情報ページ
Aで選択した情報を初期表示させたい

B.htmlファイル

html

1 2<ul class="nav nav-tabs"> 3 <li class="active"><a href="#tab1"></a></li> 4 <li><a href="#tab2"></a></li> 5 <li><a href="#tab3"></a></li> 6</ul> 7 8<div class="tab-content"> 9 <div class="tab-pane active" id="tab1">Tab1 Content</div> 10 <div class="tab-pane" id="tab2">Tab2 Content</div> 11 <div class="tab-pane" id="tab3">Tab3 Content</div> 12</div> 13

ちなみに使っているのはブートストラップのタブナビゲーションです。

私の知識ですと
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ファイル

html

1 2<ul class="nav nav-tabs"> 3 <li <?php if(isset($_GET['a'])) { echo 'class="active"'; } ?>><a href="#tab1"></a></li> 4 <li <?php if(isset($_GET['b'])) { echo 'class="active"'; } ?>><a href="#tab2"></a></li> 5 <li <?php if(isset($_GET['c'])) { echo 'class="active"'; } ?>><a href="#tab3"></a></li> 6</ul> 7 8<div class="tab-content"> 9 <div class="tab-pane <?php if(isset($_GET['a'])) { echo 'active'; } ?>" id="tab1">Tab1 Content</div> 10 <div class="tab-pane <?php if(isset($_GET['b'])) { echo 'active'; } ?>" id="tab2">Tab2 Content</div> 11 <div class="tab-pane <?php if(isset($_GET['c'])) { echo 'active'; } ?>" id="tab3">Tab3 Content</div> 12</div> 13

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

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 を使うと思います。

PHP

1$lis = array( 'tab1' => 'あ' 2 , 'tab2' => 'い' 3 , 'tab3' => 'う' 4 ); 5foreach ( $lis as $tab => $val ) { 6 $html .= sprintf( '<li%1$s><a href="#%2$s">%3$s</a></li>%4$s' 7 , /* %1$s */ ( isset( $_GET[ $tab ] ) ) ? ' class="active"' : '' 8 , /* %2$s */ $tab 9 , /* %3$s */ $val 10 , /* %4$s */ "\n" 11 ); 12} 13if ( empty( $html ) ) { 14 printf( '<ul class="nav nav-tabs">%2$s%1$s</ul>%2$s', $html, "\n" ); 15};

【PHP: sprintf - Manual】
http://php.net/manual/ja/function.sprintf.php

投稿2016/05/12 18:12

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

せめて、if文の部分を関数化すればスマートになるかと。

または、jqueryを使うと、n番目の要素とかを割と簡単に選択できるので、ロード時にn番目の要素のclassにactiveを付ける。という感じで書けば汎用的になりそうですね。

投稿2016/05/11 04:49

CodeLab

総合スコア1939

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問