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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

Q&A

解決済

3回答

9312閲覧

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

kii.32

総合スコア67

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

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

0グッド

0クリップ

投稿2020/03/27 07:40

前提・実現したいこと

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

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

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

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

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

タブ2の中に

<section id="link_target"></section>

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

試したこと

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

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

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

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

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

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

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

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

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

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

guest

回答3

0

ベストアンサー

【別ページにて】

<a href="https://exampla01/#link_target">リンク先</a>

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

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

総合スコア33620

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

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

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; });
guest

0

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

投稿2020/03/27 12:49

編集2020/03/27 12:50
yambejp

総合スコア114572

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

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

kii.32

2020/03/31 05:38

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

0

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に文字を付け足す方法であって、やりたいこととは関係ないと思いますが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問