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

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

ただいまの
回答率

88.91%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 173

namihana

score 23

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/21 18:30

    ご回答ありがとうございます。

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

    キャンセル

  • 2020/07/25 18:00 編集

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

    キャンセル

  • 2020/07/25 18:11

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

    キャンセル

checkベストアンサー

0

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

// index.html

    <script>
        const a = document.getElementsByTagName("a");

        sessionStorage.removeItem("key");

        a[2].addEventListener("click", () => {
            sessionStorage.setItem("key", "zero");
        });

        a[3].addEventListener("click", () => {
            sessionStorage.setItem("key", "first");
        });

        a[4].addEventListener("click", () => {
            sessionStorage.setItem("key", "second");
        });

    </script>


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

// tab2.html

    <script type="text/javascript">
        if (sessionStorage.getItem('key') === "first") {
            setTimeout(() => {
                first.scrollIntoView(true);
            }, 10);
        }

        if (sessionStorage.getItem('key') === "second") {
            setTimeout(() => {
                second.scrollIntoView(true);
            }, 10);
        }

        sessionStorage.removeItem("key");


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/25 20:58

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

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る