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

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

ただいまの
回答率

91.77%

  • JavaScript

    10060questions

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

  • CSS

    3497questions

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

  • HTML5

    2558questions

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

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

解決済

回答 2

投稿 2017/06/13 22:58 ・編集 2017/06/14 22:36

  • 評価
  • クリップ 0
  • VIEW 211

RedPepper

score 8

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

クラス「navi_wrap」をタブとして、
タブをクリックすると、クラス「box_wrap」に指定の内容を表示させる。
いわゆるタブの切り替えを実装。

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

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

タブの切り替え

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

<!-- タブ -->
<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>
/*タブ*/
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;}
$(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');
    });
});

別ページからリンクしてきた場合

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

<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

$(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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+4

なかなか惜しい感じになっていますね。

var tabno = $('ul.navi_wrap li#' + tabname).index();


変数tabnameにはタブ名(tabxx)ではなくボックス名(boxxx)が入っています。
よって、

var tabno = $('.box_wrap div#' + tabname).index();


と変更するか、タブ名(tabxx)を指定するように変更するかのどちらかを行います。

 if($(hash).length){


ここに$()はいらないです。


動く動かないと関係ありませんが、読み込み時と、タブクリック時で、同じ処理をしています。
読み込み時のハッシュからタブを特定し、$(tab).click()でクリックイベントを飛ばしてやれば、行数を減らせます。

投稿 2017/06/14 09:23

編集 2017/06/14 09:35

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2017/06/14 22:46

    moredeepさん コメントありがとうございます。

    ご指摘をもらった①と②を下記のように修正しましたが、思うように動いてくれませんでした。

    ①-----
    以下の部分を
    var tabno = $('ul.navi_wrap li#' + tabname).index();
    以下に修正
    var tabno = $('.box_wrap div#' + tabname).index();
    ----------

    ②-----
    以下の部分を
    if($(hash).length){
    以下に修正
    if(hash.length){
    ----------

    ③については、タブの切り替えができてから、まとめ直してみます。
    アドバイスありがとうございます。


    ないとは思いますが、他に読み込んでいるファイルのせいかな?
    と思ったので、読み込んでいるファイルを、追加で記述しています。

    キャンセル

  • 2017/06/15 09:06

    追記されたcssを適用、jqueryのバージョンを使用し、再度提示のコード+①、②の修正で確認しましたが、動作するようです。

    >思うように動いてくれません
    質問文のまま動きは変わらないのでしょうか。変わったのならそれを教えてください。
    使用しているブラウザを教えてください。
    ブラウザの開発者ツールにて、何かエラーが出ていないかを確認してください。
    また、ブレークポイントを張り、該当箇所の処理が実行されていることを確認してください。

    キャンセル

  • 2017/06/15 22:41

    >質問文のまま動きは変わらないのでしょうか。変わったのならそれを教えてください。
    ①と②を修正しても、修正する前と、動きが変わりません。

    >使用しているブラウザを教えてください。
    ChromeとFirefoxです。

    >ブラウザの開発者ツールにて、何かエラーが出ていないかを確認してください。
    FirefoxのFirebugでみる限り、エラーは出ていません。

    キャンセル

  • 2017/06/16 00:00 編集

    「別ページから飛んで来たとき、タブを切り替えて表示させたい」とありますが、
    別の記述方法で、実装できました。
    ですが、これはこれでまた別の問題があるので、別途質問しています。
    https://teratail.com/questions/80553?modal=q-comp

    今質問している方法も、解決できれば、したいので、引き続きアドバイスをいただけると幸いです。

    キャンセル

  • 2017/06/16 09:00

    こちらchromeで確認できているので、申し訳ないのですが原因がわかりません。
    1行ずつ実行や、console.log等で、location.hash、hash(matchの後)、$('ul.navi_wrap li#' + tabname)の結果等の値を表示してみて、どこがおかしいのか探してみてください。

    キャンセル

  • 2017/06/21 10:51

    質問者様
    いっそのこと現在の状態のソースコードを提示されてはどうでしょうか。
    どこかに回答者様の提案どおりにできていない箇所があるのではと思います。

    キャンセル

  • 2017/06/21 10:56 編集

    それか質問者様側の意図ややりたいことが上手くこちらに伝わっていないか。
    私も理解した感じだと回答者様の今回の提案で上手く動いているように思うので。

    キャンセル

  • 2017/06/22 23:46

    moredeepさん
    アドバイスありがとうございました。
    一つ一つ結果を出した結果、たどりつきました。

    キャンセル

check解決した方法

0

「別ページからリンクしてきた場合」以下にあるJavaScriptを次のように修正したら、
思うような動きができました。

修正ポイント①読み込みのタイミング
$(function() { → $(window).load(function(){

修正ポイント②ほしい情報の割り出し方
以下のソースコード2カ所を削除

 if($(hash).length){
  //[#box~]である場合、#より後を取得    
    var tabname = hash.slice(1) ;
  } else{
    //[#box~]でない場合、「box01」を表示
    var tabname = "box01" ;
  }
  var tabno = $('ul.navi_wrap li#' + tabname).index();


以下のソースコードを追記

    var tabname = hash.slice(4);
    var tabbar = tabname - 1;

記述し直したものが次のソースコードです。

  $(window).load(function(){
    //#以下を取得
    var hash = location.hash;
    //[#box~]であるか確認
    hash = (hash.match(/^#box\d+$/) || [])[0];
    // さらに割り出し
    var tabname = hash.slice(4);
    var tabbar = tabname - 1;

    //コンテンツをすべて非表示
    $('.box_text').css('display','none');
    //指定内容のみ表示
    $('.box_text').eq(tabbar).fadeIn();

    //タブをすべてoff
    $('ul.navi_wrap li').removeClass('active');
    //選択したタブのみon
    $("ul.navi_wrap li").eq(tabbar).addClass('active');
  });


これで、別のページからタブを指定して飛んできたら、
指定したタブを選択した状態で表示されるようになりました。

アドバイスありがとうございました。

投稿 2017/06/22 23:42

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

91.77%

関連した質問

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

  • JavaScript

    10060questions

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

  • CSS

    3497questions

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

  • HTML5

    2558questions

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