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

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

ただいまの
回答率

87.36%

URLにアンカーリンクを付加させない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,259

score 11

idでページリンクさせた場合にURLの末尾に#tab1とついてしまうのですが、URLにアンカーリンクを付加させないでtest.htmlのみにしたく考えています。
URLにアンカーリンクを付加させないで目的の場所へ移動させたいです。

<div class="flex">
        <div>
            <div><a class="icon1" href="test.html/#tab1"><img src="" alt=""></a></div>
            <p><a class="icon1" href="test.html/#tab1">テスト1</a></p>
        </div>
        <div>
            <div><a class="icon2" href="test.html/#tab2"><img src="" alt=""></a></div>
            <p><a class="icon2" href="test.html/#tab2">テスト2</a></p>
        </div>
        <div>
            <div><a class="icon3" href="test.html/#tab3"><img src="" alt=""></a></div>
            <p><a class="icon3" href="test.html/#tab3">テスト3</a></p>
        </div>
        <div>
            <div><a class="icon4" href="test.html/#tab4"><img src="" alt=""></a></div>
            <p><a class="icon4" href="test.html/#tab4">テスト4</a></p>
        </div>
        <div>
            <div><a class="icon5" href="test.html/#tab5"><img src="" alt=""></a></div>
            <p><a class="icon5" href="test.html/#tab5">テスト5</a></p>
        </div>
        <div>
            <div><a class="icon6" href="test.html/#tab6"><img src="" alt=""></a></div>
            <p><a class="icon6" href="test.html/#tab6">テスト6</a></p>
        </div>
        <div>
            <div><a class="icon7" href="test.html/#tab7"><img src="" alt=""></a></div>
            <p><a class="icon7" href="test.html/#tab7">テスト7</a></p>
        </div>
    </div>
<p class="page-15-p">ダミーテキスト</p>
<!--タブ-->
<ul class="tab-group" id="group-top">
    <li id="tab1" class="tab is-active">テスト1</li>
    <li id="tab2" class="tab">テスト2</li>
    <li id="tab3" class="tab">テスト3</li>
    <li id="tab4" class="tab">テスト4</li>
    <li id="tab5" class="tab">テスト5</li>
    <li id="tab6" class="tab">テスト6</li>
    <li id="tab7" class="tab">テスト7</li>
</ul>

<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
  <div class="panel is-show">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
  <div class="panel">
  </div>
</div>
.tab{
    flex-grow: 1;
    list-style:none;
    text-align:center;
    cursor:pointer;
    width:calc(100% / 7);
    height:80px;
    font-size:0.6em;
    position:relative;
    padding-top:70px;
    color:#ccc;
    box-sizing:border-box;
}
.tab:hover{
    color:#000;
}
.tab:before{
    content:"";
    position:absolute;
    left:50%;
    top:10%;
     transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
    display:inline-block;
    width:5em;
    height:5em;
    background:url() no-repeat;
    background-size:contain;
}
    <script type="text/javascript">
//タブ操作
jQuery(function($){
    var target = $('.page-15-p');
    var position = target.offset().top;
    $('.tab').click(function(){
        $('.is-active').removeClass('is-active');
        $(this).addClass('is-active');
        $('.is-show').removeClass('is-show');
        // クリックしたタブからインデックス番号を取得
        const index = $(this).index();
        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
        $('.panel').eq(index).addClass('is-show');
    });
    $('.tab1').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab1').addClass('is-active');
        $('#tab1').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab2').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab2').addClass('is-active');
        $('#tab2').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab3').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab3').addClass('is-active');
        $('#tab3').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab4').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab4').addClass('is-active');
        $('#tab4').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab5').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab5').addClass('is-active');
        $('#tab5').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab6').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab6').addClass('is-active');
        $('#tab6').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
    });
    $('.tab7').click(function(){
        $('.is-active').removeClass('is-active');
        $('#tab7').addClass('is-active');
        $('#tab7').addClass('is-show');
        $('body,html').stop().animate({scrollTop:position}, 500);
        return false;
    });
});
</script>
        <script type="text/javascript">
//タブ内から別タブへのページ内リンク
jQuery(function($){
    $('.anchor').click(function(){
        $('.tab:first-child').removeClass('is-active');
        $('.tab:nth-child(3)').addClass('is-active');
       $('.is-show').removeClass('is-show');
        $('.panel:nth-child(3)').addClass('is-show');
     var target = $('#page-link1');
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500);
        return false;
    });
});
</script>
    <script>
//         タブへのダイレクトリンク
        jQuery(function($){
    $(function() {
  //#以下を取得
  var hash = location.hash ;
  //[#tab~]であるか確認
  hash = (hash.match(/^#tab\d+$/) || [])[0];

 if($(hash).length){
  //[#tab~]である場合、#より後を取得    
    var tabname = hash.slice(7);
    var tabbar = tabname - 1;
  } 
   $(function() {
       $('.is-active').removeClass('is-active');
        $(hash).addClass('is-active');
        $('.is-show').removeClass('is-show');
        // クリックしたタブからインデックス番号を取得
        const index = $(hash).index();
        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
        $('.panel').eq(index).addClass('is-show');
            });
  } );
        });
    </script>
    <script>
        jQuery(function($){
$(document).ready(function(){
  //URLのハッシュ値を取得
  var urlHash = location.hash;
  //ハッシュ値があればページ内スクロール
  if(urlHash) {
    //スクロールを0に戻す
    $('body,html').stop().scrollTop(0);
    setTimeout(function () {
      //ロード時の処理を待ち、時間差でスクロール実行
      scrollToAnker(urlHash) ;
    }, 100);
  }

  //通常のクリック時
  $('.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7').click(function() {
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });

  // 関数:スムーススクロール
  // 指定したアンカー(#ID)へアニメーションでスクロール
  function scrollToAnker(hash) {
    var target = $('.page-15-p');
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 500);
  }
})
            });
    </script>
    <script>
        jQuery(function($){
    // liのうち、href属性が指定されているものを取得
$('li[href]').click(function(){
    let href = $(this).attr('href');
    location.href = href;
    // window.open(href);
});
            });
    </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • gouf

    2019/08/28 02:05

    こちらが参考になりますか? : https://stackoverflow.com/questions/15223006/scroll-with-anchor-without-in-url

    キャンセル

  • nakajima4

    2019/08/28 12:29

    参考になる資料を教えていただいてありがとうございます。
    スクロールする方法で位置の調整は解決したのですが、return falseが効いていないのか、URLに#がついてしまいました。

    キャンセル

  • Lhankor_Mhy

    2019/08/28 13:41

    昨日も同じ質問を見たのですが、流行っているんでしょうか……?
    https://teratail.com/questions/208594

    キャンセル

回答 1

checkベストアンサー

+2

 $('.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7').click(function() {
    //ページ内リンク先を取得
    var href= $(this).attr("href");
    //リンク先が#か空だったらhtmlに
    var hash = href == "#" || href == "" ? 'html' : href;
    //スクロール実行
    scrollToAnker(hash);
    //リンク無効化
    return false;
  });

<a> はリンクにマークアップするものです。
return false; でリンク機能を無効化するなら、それはリンクではないので、<a> でマークアップするのを止めましょう。
そうすれば、URL に #tab1 が付与されることはなくなります。

Re: nakajima4 さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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