ハイパーリンクをクリックしてもトラベル旅行はありません

Question

タブが付いている角度のあるアプリがあります。私は1ページだとき

<ul class="dropdown-menu" dropdown-menu> 
    <li><a href="/page1">page 1</a></li> 
    <li><a href="/page2#/tab1/">page 2</a></li> 
    <li><a href="/page2#/tab2">page 3</a></li> 
</ul> 

が、私はどちらか2ページまたは3ページだけで罰金に旅行することができます：私はこのようになりますドロップダウンでナビゲーションバーを持っています。 URLが変更され、ページが読み込まれてそのタブのコンテンツが表示されます。

問題は次のとおりです。ページ2またはページ3にあるときに、他のページへのハイパーリンクをクリックするとURLが変更されますが、ページには新しいコンテンツが読み込まれません。

ハイパーリンクの動作が、どのページに関係なく一貫していることを確認するにはどうすればよいですか？

Answer 1

「ページ2」と「ページ3」は同じページ（ページ2）です。 URLの＃の後にあるものはフラグメント識別子で、フラグメント識別子はページのどこにロードするべきかを示します。 https://en.wikipedia.org/wiki/Fragment_identifier#Examples （ボーナス：注意してくださいどのようにお使いのブラウザあなたが「TAB1」のような変数を使用しているとき

一般的には、JavaScriptの負荷（この質問の範囲を超えている）、そのタブ

さらに読書を持っていると思います）[0120] [例]セクションにまっすぐに進みますか？）

更新：コメントには、ページの変更が一貫しているように見せたいとします。次のコードは、 - 同じファイルを指している間も、Webサーバーから同じコンテンツが提供されることを確認できないため、ブラウザはURLを更新する必要があります。これを行うには

<ul class="dropdown-menu" dropdown-menu> 
    <li><a href="/page1">page 1</a></li> 
    <li><a href="/page2?tab=1#/tab1/">page 2</a></li> 
    <li><a href="/page2?tab=2#/tab2">page 3</a></li> 
</ul> 

Answer 2

試してみてください。

HTML：

<ul class="dropdown-menu" dropdown-menu> 
    <li><a href="#page1">page 1</a></li> 
    <li><a href="#page2">page 2</a></li> 
    <li><a href="#page2">page 3</a></li> 
</ul> 
<div id="page1">Content of Page 1</div> 
<div id="page2">Content of Page 2</div> 
<div id="page3">Content of Page 3</div> 

のjQuery：

<script type="text/javscript"> 
    $('#page1').click(function() { 
     $('#page1').show(); 
     $('#page2').hide(); 
     $('#page3').hide(); 
    }) 
    $('#page2').click(function() { 
     $('#page2').show(); 
     $('#page1').hide(); 
     $('#page3').hide(); 
    }) 
    $('#page3').click(function() { 
     $('#page3').show(); 
     $('#page2').hide(); 
     $('#page3').hide(); 
    }) 
</script>