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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

Q&A

解決済

2回答

1923閲覧

ページを移った先のタブ内でのアンカーリンクの動作方法がわからない。

namihana

総合スコア23

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

0グッド

0クリップ

投稿2020/07/20 10:09

index.htmlでリンクをクリックすると、tab2.html内の特定のタブが開かれてその後、指定のidの場所に飛びたいのですがなかなかうまくいきません。

ちなみに現在はネットで色々調べた結果
リンクをクリック→特定のタブを開く
という工程はできております。

そのあと特定のアンカーに飛ぶところで詰まっております。

飛ぶ箇所も一箇所ではなく、index.htmlのリンクによって飛び場所を複数作りたいとおもっています。

gitを公開しておりますのでよろしければみていただけないでしょうか。。
https://github.com/nannantown/tab

↓index.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="index.css"> <title>Title</title> </head> <body> <ul> <li><a href="tab2.html#tab1">このリンクはTab1に飛びます。</a></li> <li><a href="tab2.html#tab2">このリンクはTab2に飛びます。</a></li> <li><a href="tab2.html#tab3">このリンクはTab3に飛びます。</a></li> <li><a id="jump" value="amino-simple" href="tab2.html#tab2" onclick="takeData()">このリンクはTab2のリンクに飛びます。</a></li> <li><a id="jump2" value="amino-mix" href="tab2.html#tab2" onclick="takeData()">このリンクはTab2のリンクに飛びます。</a></li> </ul> </body> </html>

↓tab2.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <title>Title</title> </head> <body> <div class="all_area"> <ul class="tab_area"> <li id="tab1" class="select">Tab1</li> <li id="tab2">Tab2</li> <li id="tab3">Tab3</li> </ul> <!-- tab1 start --> <div class="content_area"> <ul class="list_area"> <li>これはTab1の内容です</li> <li>これはTab1の内容です</li> <li>これはTab1の内容です</li> <li>これはTab1の内容です</li> </ul> <!-- /tab1 end --> </div> <!-- tab2 start --> <div class="content_area hide"> <p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p> <!-- /tab2 end --> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a name="new">ここに飛びたい</a> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <!-- tab3 start --> <div class="content_area hide"> <p>これはTab3の内容です<br> </p> <!-- /tab3 end --> </div> <!-- /tab area end --> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!--<script type="text/javascript" src="newtab.js"></script>--> <script type="text/javascript"> $(function() { //クリックしたときのファンクションをまとめて指定 $('ul.tab_area li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 // indexという変数に代入します。 var index = $('ul.tab_area li').index(this); //コンテンツを一度すべて非表示にし、 $('.content_area').css('display','none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.content_area').eq(index).fadeIn(); //タブについているクラスselectを消し、 $('.tab_area li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); //ダイレクトリンク $(function() { // var takeData = function (){ // const data = document.getElementById("hop"); // console.log(data); // }; //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'); // if (value1 == "amino-simple"){ // location.hash='new' // }else{ // input.value = "赤"; // } // var jump = data.value; // console.log(jump); // switch( jump ) { // case 'amino-simple': // location.hash='new'; // break; // // // case '曇り': // console.log('今日は曇りです!'); // break; // // // case '雨': // console.log('今日は雨です!'); // break; // } }); </script> </body> </html>

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

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

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

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

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

guest

回答2

0

アンカーリンク名をidとして対象の要素に付与すれば良いと思います。

html

1<a name="new">ここに飛びたい</a> 23<a name="new" id="アンカーリンク名">ここに飛びたい</a>

投稿2020/07/20 11:54

FrontEnd_Japan

総合スコア271

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

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

namihana

2020/07/21 09:30

ご回答ありがとうございます。 ページ遷移後のタブ指定のところでhrefをtab2.html#tab2と指定しているので、"ここに飛びたい"のところでid指定をしてもそのidへ飛ぶ方法がないかとおもうのですが、、他の解決方法ということでしょうか?
FrontEnd_Japan

2020/07/25 09:10 編集

tab2.htmlで、下記の様に実装しても解決できないでしょうか。 特殊な実装ではなく、ベーシックな実装方法なのですが・・・。 <a name="new" id="tab2">ここに飛びたい</a>
guest

0

ベストアンサー

やってみたら出来たのでどぞー
まず初めに、上にあるindex.html に 下記のコードを追加

HTML

1// index.html 2 3 <script> 4 const a = document.getElementsByTagName("a"); 5 6 sessionStorage.removeItem("key"); 7 8 a[2].addEventListener("click", () => { 9 sessionStorage.setItem("key", "zero"); 10 }); 11 12 a[3].addEventListener("click", () => { 13 sessionStorage.setItem("key", "first"); 14 }); 15 16 a[4].addEventListener("click", () => { 17 sessionStorage.setItem("key", "second"); 18 }); 19 20 </script> 21

次に tab2.html のscriptに以下のコードを追加

HTML

1// tab2.html 2 3 <script type="text/javascript"> 4 if (sessionStorage.getItem('key') === "first") { 5 setTimeout(() => { 6 first.scrollIntoView(true); 7 }, 10); 8 } 9 10 if (sessionStorage.getItem('key') === "second") { 11 setTimeout(() => { 12 second.scrollIntoView(true); 13 }, 10); 14 } 15 16 sessionStorage.removeItem("key"); 17

これで質問内容の動作を実行できます。
仕組みとしてはsessionStorageを使い、押したリンクをクリックすることで
値を保存し、その値によってスクロールしない firstにスクロール secondにスクロール
するかを決定しています。

投稿2020/07/25 07:09

Jon_do

総合スコア1373

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

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

namihana

2020/07/25 11:58

ありがとうございます。解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問