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

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

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

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

6022閲覧

別ページから特定のタブにダイレクトリンクさせたい

mmngchip

総合スコア19

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/05/16 02:57

別ページから特定のタブにダイレクトリンクしたいです。

既に作成していたページに追加で
ダイレクトリンクを追加しようと思い、
参考URLを元に記述してみたのですが、

リンク元から飛んだ時は、飛ばしたいタブにダイレクトリンクするようになったのですが、
リンク先の通常タブがactiveにならず正常に動いてくれません。

どこがおかしいのかご教授願えればと思います。
よろしくお願いいたします。。。

参考元
https://irohacross.net/2015/02/jquery_tab.html

下記がリンク元

html

1          <div class="InfoWrap"> 2 <table class="InfoTemp"> 3 <tbody> 4 <tr> 5 <th>あああ</th> 6 <th>いいい</th> 7 <th>ううう</th> 8 <th>えええ</th> 9 <th>おおお</th> 10 </tr> 11 <tr> 12 <td><a href="/page/content#cont05">リンク</a></td> 13 <td>内容</td> 14 <td>内容</td> 15 <td>内容</td> 16 <td>内容</td> 17 </tr> 18 </tbody> 19 </table> 20 </div>

下記がリンク先

html

1 <section> 2 <div class="inner"> 3 <div class="fund-made-to-order newTabHead"> 4 <div class="nav tab-head"> 5 <ul class="cf inner tab_area"> 6 <li class="tab active"><a href="#cont01">あああ</a></li> 7 <li class="tab"><a href="#cont02">いいい</a></li> 8 <li class="tab"><a href="#cont03">ううう</a></li> 9 <li class="tab"><a href="#cont04">えええ</a></li> 10 <li class="tab"><a href="#cont05">おおお</a></li> 11 </ul> 12 </div> 13 14 <div class="tab-body"> 15 16 <div class="cont content_area active" id="cont01"> 17 内容 18 <!--cont--></div> 19 20 21 <div class="cont content_area" id="cont02"> 22 内容 23 <!--cont--></div> 24 25 26 <div class="cont content_area" id="cont03"> 27 内容 28 <!--cont--></div> 29 30 31 32 <div class="cont content_area" id="cont04"> 33 内容 34 <!--cont--></div> 35 36 37 <div class="cont content_area" id="cont05"> 38 内容 39 <!--cont--></div> 40 41 <!--tab-body--></div> 42 <!--inner--></div> 43 </section>

jquery

1// ============================================================== 2// 通常タブ 3// ============================================================== 4 5 $(function(){ 6 $(".tab-head a").click(function(e) { 7 e.preventDefault(); 8 var target = $(this).attr('href'); 9 if (! $(target).length) return false; 10 $('.tab', $(this).closest('.tab-head')).removeClass('active'); 11 $(this).closest('.tab').addClass('active'); 12 $('.cont', $(target).closest('.tab-body')).removeClass('active'); 13 $(target).addClass('active'); 14 }); 15 }); 16 17// ============================================================== 18// ダイレクトリンク 19// ============================================================== 20 21 $(function() { 22 //location.hashで#以下を取得 変数hashに格納 23 var hash = location.hash; 24 //hashの中に#cont~が存在するか調べる。 25 hash = (hash.match(/^#cont\d+$/) || [])[0]; 26 27 //hashに要素が存在する場合、hashで取得した文字列(#cont2,#cont3等)から#より後を取得(cont2,cont3) 28 if($(hash).length){ 29 var tabname = hash.slice(1) ; 30 } else{ 31 // 要素が存在しなければtabnameにcont1を代入する 32 var tabname = "cont01";} 33 //コンテンツを一度すべて非表示にし、 34 $('.content_area').css('display','none'); 35 36 //一度タブについているクラスactiveを消し、 37 $('.tab_area li').removeClass('active'); 38 39 var tabno = $('ul.tab_area li#' + tabname).index(); 40 41 //クリックされたタブと同じ順番のコンテンツを表示します。 42 $('.content_area').eq(tabno).fadeIn(); 43 44 //クリックされたタブのみにクラスactiveをつけます。 45 $('ul.tab_area li').eq(tabno).addClass('active') 46 });

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

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

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

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

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

m.ts10806

2019/05/16 03:16

ダイレクトリンク部分の処理のtabname はどうなっていますか? console.log()で出力して確認してみてください。
x_x

2019/05/17 07:46

参考サイトの「通常のタブ」ではclassで表示制御するようにはなっていませんでしたが、なぜ変えたのでしょうか?
mmngchip

2019/05/20 01:02

既に作ってあるサイトだったので、そこに追加でこの機能を実装したかったのです。 難しそうなので、参考ページと記述を合わせて実装することにします。 ご意見ありがとうございます。
guest

回答1

0

ベストアンサー

リンク先が「/page/content#cont05」となっていますうが
例示のソースが「「/page/content」にかかれているのですね?
(htmlファイルではない?)

その上で#cont05がブラウザのurl欄に指定された状態なら
「#cont05」がダイレクトリンクされている状態になっています
あとは見せ方の問題なので、

  • リンクがされない=「url欄に#cont05が付加されない」
  • リンクされているけど頭出しされない

のどちらかを明確にしたほうがよいでしょう

投稿2019/05/16 03:21

yambejp

総合スコア114585

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

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

mmngchip

2019/05/16 05:12

例示のソースがは「/page/content」に記述しています。HTMLではなくPHP管理をしています。 ダイレクトリンクにはなっているのですが、 「/page/content」にいる状態で別のタブ(cont01やcont02など)に切り替えようとすると切り替わってくれないので、困っております。 うまくお伝えすることができず申し訳ありません。
yambejp

2019/05/16 05:18 編集

リンク先と書かれた内容をみるかぎりサーバー側の処理が みあたりませんが、話の流れから類推するに ハッシュ付きでアクセスしたときにハッシュなしに飛ばす処理が php側でされているように感じます 具体的にcontentがどういうサーバー側の処理をしているか 提示するか、提示できないならご自身でよく検証するかの どちらかですね phpがやっているとjsでは#cont05の情報を掴むことはできません (飛んできたときにすでに情報が削除されているため)
mmngchip

2019/05/20 01:05

contentがどういうサーバー側の処理をしているかが分からなかったので、 今回は参考ページに記述を合わせて実装することにします。 貴重なご意見ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問