不動産内製化で制作の為、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;
}

退会済みユーザー

2020/05/12 04:21

どこに java ( https://docs.oracle.com/javase/jp/8/docs/api/ ) の問題が絡むのでしょうか?

行動規範の内容に同意します

回答1件

ベストアンサー

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

[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

総合スコア36960

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を記載いたしました。恐れ入りますが、再度お願いできますでしょうか？宜しくお願い致します。

Lhankor_Mhy

2020/05/13 01:31

追記しました。

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」の６つに分かれています。現状どれを押しても「団体 & 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"; を削除しましたら問題なく動作するようになりました。初投稿のため、質問内容などわかりずらい部分が多くあったかと思いますが、丁寧に、分かりやすいご回答を頂きまして大変助かりました。ありがとうございました。

行動規範の内容に同意します