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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

2回答

8590閲覧

ブラウザバックしても選択したタブが開かれたままにしたい

yukabyo

総合スコア135

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

1クリップ

投稿2018/01/25 02:15

jQueryでタブの切り替えを作成しました。
タブを切り替えて、違うページに遷移し、戻るボタンで戻っても、選択したタブが開かれたままにしたいです。
location.hash = 'test' + (index+1);というのを書いて、タブが切り替わった時に#test1, #test2, #test3 とURLに付くようにはしています。
調べていろいろ試したのですが、うまくいかず、どなたか教えていただけないでしょうか?

html

1<div class="all_area"> 2 3 <ul class="tab_area"> 4 <li id="tab1" class="select">Tab1</li> 5 <li id="tab2">Tab2</li> 6 <li id="tab3">Tab3</li> 7 </ul> 8 9 <div class="content_area"> 10 <a href="/link1/">これはTab1の内容です</a> 11 </div> 12 13 <div class="content_area hide"> 14 <a href="/link2/">これはTab2の内容です</a> 15 </div> 16 17 <div class="content_area hide"> 18 <a href="/link3/">これはTab3の内容です</a> 19 </div> 20 21</div>

css

1<style> 2.tab_area{ 3 overflow:hidden; 4 display:table; 5} 6 7.tab_area li{ 8 /*Tabの装飾*/ 9 width:139px; 10 height:49px; 11 text-align:center; 12 border-right: 1px dotted #909090; 13 cursor: pointer; 14 vertical-align:middle; 15 display:table-cell; 16 color:#333333; 17 background-color:#ffffff; 18 } 19 20.all_area { 21 background:#efefef; 22 padding:10px; 23 overflow: hidden; 24 } 25 26.all_area div.content_area{ 27 /*Tabの内容を表示するエリアの装飾*/ 28 background:#ffffff; 29 padding:10px 10px 10px 2px; 30 border-top: 1px dotted #bbbbbb; 31 } 32 33.tab_area li.select{ 34 /*アクティブタブの装飾*/ 35 background-color:#ffffff; 36 background-image:none; 37 border-top:2px solid #e94545; 38 } 39 40.hide{display:none;} 41</style>

javascript

1$(function() { 2 //クリックしたときのファンクションをまとめて指定 3 $('ul.tab_area li').click(function() { 4 //.index()を使いクリックされたタブが何番目かを調べ、 5// indexという変数に代入します。 6 var index = $('ul.tab_area li').index(this); 7 8 //コンテンツを一度すべて非表示にし、 9 $('.content_area').css('display','none'); 10 11 //クリックされたタブと同じ順番のコンテンツを表示します。 12 $('.content_area').eq(index).fadeIn(); 13 14 //タブについているクラスselectを消し、 15 $('.tab_area li').removeClass('select'); 16 17 //クリックされたタブのみにクラスselectをつけます。 18 $(this).addClass('select'); 19 20 location.hash = 'test' + (index+1); 21 }); 22});

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

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

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

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

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

guest

回答2

0

pageshowイベントで、クリックイベントを発火してあげたらできませんか?
古いIEでは動作しないようですが、とりあえずFF等では動作を確認できました。

投稿2018/01/25 02:55

moredeep

総合スコア1507

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

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

yukabyo

2018/01/25 03:03

リンク貼っていただきありがとうございました。 今回は自己解決となりましたが、リンク読ませていただき、参考にさせていただきます。
guest

0

自己解決

●変更

javascript

1location.hash = 'test' + (index+1);

javascript

1location.hash = 'tab' + (index+1);

●追加

javascript

1$(document).ready(function(){ 2//ハッシュを取得 3var hash = location.hash; 4if(hash){ 5//#部分を省く 6hash = hash.replace('#', ''); 7// 'tab1'という文字列が取得できるので、該当のidを持つli要素の子imgのクリックイベントを発生させる 8$('#' + hash).trigger('click'); 9} 10});

以上のコードでできたと思ったのですが、
タブボタンを押した際にページ内リンクが起こってしまったため、
もっと簡単な方法があるかもしれませんが、以下の方法で解決しました。

javascript

1location.hash = 'test' + (index+1);

このままで、

●追加

javascript

1$(document).ready(function(){ 2//ハッシュを取得 3var hash = location.hash; 4if(hash == "#test1"){ 5 $("#tab1").trigger('click'); 6} else if(hash == "#test3") { 7 $("#tab2").trigger('click'); 8} else if(hash == "#test3") { 9 $("#tab3").trigger('click'); 10} 11});

皆様ありがとうございました。

投稿2018/01/25 03:01

yukabyo

総合スコア135

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問