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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

9299閲覧

ページ遷移後に任意のタブを開いた状態で表示させたい

d-1477

総合スコア1

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/12 04:12

編集2020/05/12 23:59

不動産内製化で制作の為、WEB制作の知識がなく
ご教授いただきたく存じます。

ページ遷移後に任意のタブを開いた状態で表示させたいと思っております。

下記がTOPページです。

<section id="discover" class="pc"> <div class="inner fadein"> <div> <p class="title_sub">FIND YOUR HOLIDAY MATCH</p> <h2>過ごし方から探す</h2> </div> <div class="flex_box space_between"> <div class="imgWrap"> <a href="<?php echo LINK;?>/experience/#family"> <h3 class="discover_text01">ファミリー</h3> <figure><img src="/img/top/discover01.jpg" alt="ファミリー"></figure> </a> </div> <div class="imgWrap"> <a href="<?php echo LINK;?>/experience/#resort"> <h3 class="discover_text02">ビーチ&リゾート</h3> <figure><img src="/img/top/discover02.jpg" alt="ビーチ&リゾート"></figure> </a> </div> <div class="flex_box column space_between"> <div class="imgWrap"> <a href="<?php echo LINK;?>/experience/#kankou"> <h3 class="discover_text03">観光</h3> <figure><img src="/img/top/discover03.jpg" alt="観光"></figure> </a> </div> <div class="imgWrap"> <a href="<?php echo LINK;?>/experience/#gurmet"> <h3 class="discover_text04">グルメ</h3> <figure><img src="/img/top/discover04.jpg" alt="グルメ"></figure> </a> </div> </div> </div> <div class="flex_box space_between"> <div class="imgWrap mt20"> <a href="<?php echo LINK;?>/experience/#onsen"> <h3 class="discover_text05">温泉</h3> <figure><img src="/img/top/discover05.jpg" alt="温泉"></figure> </a> </div> <div class="imgWrap mt20"> <a href="<?php echo LINK;?>/experience/#group"> <h3 class="discover_text06">団体&MICE</h3> <figure><img src="/img/top/discover06.jpg" alt="団体&MICE"></figure> </a> </div> </div> </div> <!-- /.inner --> </section>

下記が遷移先ページのタブです。

<section id="experience"> <div class="contents"> <div class="inner"> <div> <p class="title_sub">FIND YOUR HOLIDAY MATCH</p> <h2>過ごし方から探す</h2> </div> </div> <div class="tabs"> <input id="onsen" type="radio" name="tab_item" checked> <label class="tab_item" for="onsen">温泉</label> <input id="kankou" type="radio" name="tab_item"> <label class="tab_item" for="kankou">観光</label> <input id="resort" type="radio" name="tab_item"> <label class="tab_item" for="resort">ビーチ & リゾート</label> <input id="gurmet" type="radio" name="tab_item"> <label class="tab_item" for="gurmet">グルメ</label> <input id="family" type="radio" name="tab_item"> <label class="tab_item" for="family">ファミリー</label> <input id="group" type="radio" name="tab_item"> <label class="tab_item" for="group">団体 & MICE</label> <!-- 温泉 --> <div class="tab_content" id="onsen_content"> <div class="tab_content_description"> <div> <p class="title_sub fff">ONSEN</p> <h2 class="fff">温泉</h2> <div class="experience_base"> <h3>国内</h3> </div> <!-- 観光などが下に続きます。 -->

下記のコードを参考にしたいのですが、上記のHtmlですと
下記のコードのどこをどのように書き換えてあげればよいのかが分かりません。

//ダイレクトリンク $(function() { //location.hashで#以下を取得 変数hashに格納 var hash = location.hash; //hashの中に#tab~が存在するか調べる。 hash = (hash.match(/^#tab\d+$/) || [])[0]; //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) if($(hash).length){ var tabname = hash.slice(1) ; } else{ // 要素が存在しなければtabnameにtab1を代入する var tabname = "tab1";} //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //一度タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 $('ul.tab_area li').eq(tabno).addClass('select') });

初歩的な質問で大変申し訳ございません。
どなたかご教授いただける方がおりましたら
宜しくお願い致します。

--- タブ切り替えCSS ---

/*タブ切り替え全体のスタイル*/ .tabs { margin-top: 50px; padding-bottom: 40px; background-color: #282F39; width: 100%; margin: 0 auto;} /*タブのスタイル*/ .tab_item { width: calc(100%/6); height: 80px; border-bottom: 3px solid #282F39; background-color: #ECECEC; line-height: 50px; font-size: 20px; text-align: center; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; color: #282F39; padding-top: 15px; } .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 40px 0 0; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #onsen:checked ~ #onsen_content, #kankou:checked ~ #kankou_content, #resort:checked ~ #resort_content, #gurmet:checked ~ #gurmet_content, #family:checked ~ #family_content, #group:checked ~ #group_content { display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background-color: #282F39; color: #fff; }

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

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

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

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

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

guest

回答1

0

ベストアンサー

ご提示のコードでググったところ、以下のサイトがヒットしました。
ほとんどそのままのコードなので、おそらく、内製化する前の業者はこのコードを利用したのではないでしょうか。記事を参考にしてはいかがですか?

[jQuery]別ページから特定のタブにダイレクトリンクする方法 | Japanese style web design いろはクロス

コメントを受けて追記

これでいかがでしょうか。

css

1$(function() { 2 $(location.hash).prop('checked',true); 3});

投稿2020/05/12 06:03

編集2020/05/13 01:31
Lhankor_Mhy

総合スコア35865

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

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

d-1477

2020/05/12 06:11

ご回答ありがとうございます。 添付いただいたサイトを参考に、実装しようと試みて 記述方法がわからなくこちらで質問させていただいておりました。
Lhankor_Mhy

2020/05/12 06:18

なるほど。 現在のタブ切り替えのコードをご提示いただけますか?
d-1477

2020/05/12 08:31

記事一番下へコードを追記致しました。 かなり長いコードの為途中までとなります。 宜しくお願い致します。
Lhankor_Mhy

2020/05/12 08:35

すでにご提示いただいているコードとの違いがわかりませんでした。 こういうHTMLではなくて、タブ切り替えのロジックが書かれている部分をご提示いただきたく存じます。 おそらく、JavaScript または CSS で書かれていると思います。
d-1477

2020/05/13 00:00

大変失礼いたしました。 一番下にタブ切り替えのロジックが書かれているcssを記載いたしました。 恐れ入りますが、再度お願いできますでしょうか? 宜しくお願い致します。
d-1477

2020/05/14 00:13

追記いただきましたコードを 遷移先の</body>直前に記載しましたが 動作しませんでした。 色々記載場所を変えて試みたのですが上手くいきませんでした。 知識不足で申し訳ありません。 記載場所や、追記いただいたコード以外でも必要な 記載等ありましたらご教授いただきたく存じます。 宜しくお願い致します。
Lhankor_Mhy

2020/05/14 02:21

そうですか…… 確認したいことが3点あります。 1. エラーメッセージは出ていますか? どこでエラーメッセージを確認するのかわからない場合は、その旨お知らせください。 2. ご提示の「TOPページ」と「遷移先のページ」は全く別のページだと理解していますが、これは正しいですか? 3. サンプルページを作りました。 https://jsfiddle.net/Lhankor_Mhy/bzujfkah/ 当方の環境では、「団体 & MICE」にタブが切り替わっていますが、d-1477さんの環境ではやはり動作しませんか?
d-1477

2020/05/14 08:54

Lhankor_Mhyさん お世話になっております。 サンプルを作成いただきありがとうございます。 「団体 & MICE」を開いた状態で表示することができました。 ですが、条件分岐が必要でして、 「温泉」「観光」「リゾート」「グルメ」「ファミリー」「団体 & MICE」の6つに分かれています。 現状どれを押しても「団体 & MICE」が表示されてしまう状況です。 1.エラーメッセ―ジはTOPページ、遷移先どちらとも同じエラーが出ております。 smart_form.js:122 Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> (smart_form.js:122) at fire (jquery-1.10.2.js:3048) at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3160) at Function.ready (jquery-1.10.2.js:433) at HTMLDocument.completed (jquery-1.10.2.js:104) 2.TOPページの下層に遷移先ページがあります。 なので、全くの別ページというご回答で正しいでしょうか? 大変お手数おかけいたしますが、宜しくお願い致します。
Lhankor_Mhy

2020/05/15 01:22

> 現状どれを押しても「団体 & MICE」が表示されてしまう状況 あ、それはサンプルなので、↓この部分でそのようにしています。 location.href="#group"; そこを削除して実際のサイトに実装すれば、問題ないはずです。 そして、サンプルコードが動作して、実際のサイトで動作しないということは、 ・コピペを間違っている ・他の部分のコードと衝突している などの原因が考えられると思います。 > エラーメッセ―ジはTOPページ、遷移先どちらとも同じエラーが出ております。 それは別の部分でエラーが出ているようですね。
d-1477

2020/05/18 00:02

location.href="#group"; を削除しましたら問題なく動作するようになりました。 初投稿のため、質問内容などわかりずらい部分が多くあったかと思いますが、 丁寧に、分かりやすいご回答を頂きまして 大変助かりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問