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

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>

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

回答2件

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

html
1<a name="new">ここに飛びたい</a>
2↓
3<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>

FrontEnd_Japan

2020/07/25 09:11

こちらのサイトにも同様の記載があるので見てみてください。 https://techacademy.jp/magazine/5796

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

ベストアンサー

やってみたら出来たのでどぞー
まず初めに、上にある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