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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

別ページから飛んで来たとき、タブを切り替えて表示させたい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0リアクション

0クリップ

16704閲覧

投稿2017/06/13 13:58

編集2017/06/14 13:36

###別ページから飛んで来たときに、タブを切り替えて表示させたい
クラス「navi_wrap」をタブとして、
タブをクリックすると、クラス「box_wrap」に指定の内容を表示させる。
いわゆるタブの切り替えを実装。

1ページのみなら、これで完結なのですが、
別のページからリンクでとんできた際に、タブを切り替えて表示させたい。
と思い参考ページになるページを見ながら、記述してみましたが、うまく実装できません。
どこに不備があるのか分からず、行き詰まってます。
お助けを!

●参考ページ
http://irohacross.net/2015/02/jquery_tab.html

###タブの切り替え
1ページ内で完結させる、タブの切り替えの実装は、以下通りにできました。

HTML

<!-- タブ --> <ul class="navi_wrap clearfix"> <li class="tab01 active">メニュー01</li> <li class="tab02">メニュー02</li> <li class="tab03">メニュー03</li> </ul> <!-- 内容 --> <div class="box_wrap"> <div id="box01" class="box_text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> <div id="box02" class="box_text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> <div id="box03" class="box_text"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> </div>

css

/*タブ*/ ul.navi_wrap{ } ul.navi_wrap li{ float: left; background: #ccc; border: 1px solid #000; padding: 5px; text-align: center; } ul.navi_wrap li.active{ font-weight: bold; background: #000; color: #fff; } /*内容*/ .box_wrap{ width: 500px; height: 150px; border: 1px solid #000; overflow-x: hidden; overflow-y: auto; } .box_wrap .box_text{ padding: 5px 10px; display: none; } #box01{background: #9BFF90; display: block;} #box02{background: #FB9F60;} #box03{background: #56F5FD;} .box_wrap p{margin-bottom: 10px;}

javascript

$(function() { $('ul.navi_wrap li').click(function() { //クリックされたタブの位置 var index = $('ul.navi_wrap li').index(this); //コンテンツをすべて非表示 $('.box_text').css('display','none'); //指定内容のみ表示 $('.box_text').eq(index).fadeIn(); //タブをすべてoff $('ul.navi_wrap li').removeClass('active'); //選択したタブのみon $(this).addClass('active'); }); });

###別ページからリンクしてきた場合
タブの切り替えがあるページと同じ階層に、
リンクボタンを実装したページを作成。

HTML

<ul> <li><a href="index.html#box01">メニュー1にリンク</a></li> <li><a href="index.html#box02">メニュー2にリンク</a></li> <li><a href="index.html#box03">メニュー3にリンク</a></li> </ul>

このままボタンをおしても、ページが切り替わるだけで、タブが切り替わってくれない。

ので、タブの切り替えがあるページのJavaScriptを
参考ページを元に追加記述。

●参考ページ
http://irohacross.net/2015/02/jquery_tab.html

javascript

$(function() { //#以下を取得 var hash = location.hash ; //[#box~]であるか確認 hash = (hash.match(/^#box\d+$/) || [])[0]; if($(hash).length){ //[#box~]である場合、#より後を取得 var tabname = hash.slice(1) ; } else{ //[#box~]でない場合、「box01」を表示 var tabname = "box01" ; } //コンテンツを一度すべて非表示 $('.box_text').css('display','none'); //一度タブについているクラスactiveを削除 $('.navi_wrap li').removeClass('active'); var tabno = $('ul.navi_wrap li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.box_text').eq(tabno).fadeIn(); //クリックされたタブのみにクラスactiveをつけます。 $('ul.navi_wrap li').eq(tabno).addClass('active'); });

参考ページ通りなら、
上記の記述で別ページから飛んできても、指定したタブに切り替わって表示されるはず、、、

なのですが
表示が切り替わないだけでなく
「#box03」が選択された状態で表示される。

どこを修正すれば、
指定通りにタブが切り替わってくれるでしょうか?

###追加記述
念のため、読み込んでいるファイルを記載しておきます。

■CSS
common.css------
/* ================================================== /
/
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
----------以下略

■JavaScript
jquery-1.9.1.min.js----------
/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/
----------以下略

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。