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

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

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

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

HTML

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

CSS

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

解決済

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

d-1477
d-1477

総合スコア1

jQuery

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

HTML

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

CSS

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

1回答

-1評価

0クリップ

5212閲覧

投稿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; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

jQuery

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

HTML

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

CSS

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