タブの中のアンカーリンクへ1クリックでリンクを飛ばしたい

前提・実現したいこと

タブの中にある特定の場所へ別ページからリンクを飛ばしたいです。

https://exampla01/
のページでタブの切り替えを下記のように実装しています。

【タブ1】
https://exampla01/#tab01

【タブ2】
https://exampla01/#tab02

【CSS】CSSだけでタブ切り替えを作る方法

タブ2の中に

このようにセクションがあり、#link_targetへ別ページからアンカーリンクを飛ばしたいのですが、
どのようにすれば良いかわからず困っております。

試したこと

【別ページにて】
<a href="https://exampla01/#link_target">リンク先</a>

という風にすると飛ぶと思ったのですが、
リンク先がtab2の中にあるせいか、上手く動作しません。

jqueryを使えば、解決できるかと調べてみたのですが、解決できず質問をさせていただきました。

ご教授いただけますと幸いです。

どうぞ宜しくお願いします。

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

回答3件

ベストアンサー

【別ページにて】

でページ遷移してきたとして、

Location.hash で #以下のアンカーを取得します。

Location - Web API | MDN

それが"#link_target"だったら、tab02のラジオボタンを選択（チェック）する。

$('#tab02').prop('checked', true);

その後、#link_targetアンカーへ移動。

location.hash = "link_target"

というロジックでいいかと。あるいは、animate でスムーズスクロールさせる。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>a</title>
6    <style>
7        /*タブ切り替え全体のスタイル*/
8        .tabs {
9            margin-top: 50px;
10            padding-bottom: 40px;
11            background-color: #fff;
12            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
13            width: 700px;
14            margin: 0 auto;
15        }
16
17        /*タブのスタイル*/
18        .tab_item {
19            width: calc(100%/3);
20            height: 50px;
21            border-bottom: 3px solid #5ab4bd;
22            background-color: #d9d9d9;
23            line-height: 50px;
24            font-size: 16px;
25            text-align: center;
26            color: #565656;
27            display: block;
28            float: left;
29            text-align: center;
30            font-weight: bold;
31            transition: all 0.2s ease;
32        }
33
34        .tab_item:hover {
35            opacity: 0.75;
36        }
37
38        /*ラジオボタンを全て消す*/
39        input[name="tab_item"] {
40            display: none;
41        }
42
43        /*タブ切り替えの中身のスタイル*/
44        .tab_content {
45            display: none;
46            padding: 40px 40px 0;
47            clear: both;
48            overflow: hidden;
49        }
50
51
52        /*選択されているタブのコンテンツのみを表示*/
53        #tab01:checked~#tab01_content,
54        #tab02:checked~#tab02_content,
55        #tab03:checked~#tab03_content {
56            display: block;
57        }
58
59        /*選択されているタブのスタイルを変える*/
60        .tabs input:checked+.tab_item {
61            background-color: #5ab4bd;
62            color: #fff;
63        }
64    </style>
65    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
66</head>
67
68<body>
69    <div class="tabs">
70        <input id="tab01" type="radio" name="tab_item" checked>
71        <label class="tab_item" for="tab01">tab01</label>
72        <input id="tab02" type="radio" name="tab_item">
73        <label class="tab_item" for="tab02">tab02</label>
74        <input id="tab03" type="radio" name="tab_item">
75        <label class="tab_item" for="tab03">tab03</label>
76        <div class="tab_content" id="tab01_content">
77            <p>tab01</p><p>tab01</p><p>tab01</p><p>tab01</p><p>tab01</p>
78            <p>tab01</p><p>tab01</p><p>tab01</p><p>tab01</p><p>tab01</p>
79            <p>tab01</p><p>tab01</p><p>tab01</p><p>tab01</p>
80        </div>
81        <div class="tab_content" id="tab02_content">
82            <a href="#link_target">link</a>
83            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
84            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
85            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
86            <div id="link_target">link_target</div>
87            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
88            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
89            <p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p><p>tab02</p>
90        </div>
91        <div class="tab_content" id="tab03_content">
92            <p>tab03</p><p>tab03</p><p>tab03</p><p>tab03</p><p>tab03</p>
93            <p>tab03</p><p>tab03</p><p>tab03</p><p>tab03</p><p>tab03</p>
94            <p>tab03</p><p>tab03</p><p>tab03</p><p>tab03</p>
95        </div>
96        <script>
97            $(function () {
98                if (window.location.hash === "#link_target") {
99                    $('#tab02').prop('checked', true);
100                    $('html,body').animate({
101                        scrollTop: $('#link_target').offset().top
102                    }, 'fast');
103                }
104            });
105        </script>
106</body>
107</html>

サンプルページ

【CSS】CSSだけでタブ切り替えを作る方法

どうせスクリプト(jQuery)は必須になるのだから、タブ切り替えもjQueryでした方がシンプルになると思います。

投稿2020/03/27 12:51

編集2020/03/27 15:03

hatena19

総合スコア34084

kii.32

2020/03/27 15:33

ありがとうございます！ご丁寧に、サンプルページまでご用意していただき、無事実装することができました。今後の勉強のためにお聞きしたいのですが、タブ2内の#linkAへ移動（https://exampla01/#linkA）をした後に、タブ2内のリンクボタン（<a href="https://exampla01/#linkB"></a>）からタブ1の中にあるlinkBへ飛ばしたい場合に上記aタグをクリックしても URLが https://exampla01/#linkB に変わるだけで、ページが変わらないのですが、他の実装がさらに必要なのでしょうか？度々申し訳ございません。

hatena19

2020/03/28 02:58 編集

回答と同様の処理をリンクボタンのクリック時イベントにも実装すればいいでしょう。 <a href="#linkB" id="a_linkB">Tab01内のlinkBへ</a> $('#a_linkB').on('click', function () { $('#tab01').prop('checked', true); $('html,body').animate({ scrollTop: $('#linkB').offset().top }, 'fast'); return false; });

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

タブの切り替えをなにでやるかによります。
かんたんなところでクラスの付替えでやるとこんな感じ

codepen

投稿2020/03/27 12:49

編集2020/03/27 12:50

yambejp

総合スコア116835

kii.32

2020/03/31 05:38

例まで示していただき、ありがとうございます！大変勉強になりました。

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

URLを

https://exampla01/#tab02?s=link_target

みたいな感じにして
jQueryでパラーメーターを切り抜きして、jQueryで移動すればできると思います。

投稿2020/03/27 08:12

kyoya0819

総合スコア10429

kii.32

2020/03/27 09:34

ご回答ありがとうございます。リンク元が <a class="link_origin" href="https://exampla01/#tab02">リンク先</a> だとして下記を参考に https://www.magical-remix.co.jp/magicalog/archives/2236 jQuery(function () { jQuery(".link_origin").each(function () { var obj = jQuery(this); var link = obj.attr("href"); obj.attr("href", link + "?s=link_target") }); }); という風にしてみたのですが、上手くいかず、パラメーターの定義付？のような事をしないといけないのでしょうか？たくさん質問をしてしまい、すみません。

hatena19

2020/03/27 13:01

その参考にしたリンク先はページ内のaタグのurlに文字を付け足す方法であって、やりたいこととは関係ないと思いますが。

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

あなたの回答