點擊超鏈接不觸發旅行

Question

我有一個帶有標籤的角度應用程序。我有一個下拉菜單，看起來像這樣的導航欄：

<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> 

當我第1頁上，我可以到任何第2頁或第3頁就好了。網址更改並加載頁面以顯示該選項卡上的內容。

問題是這樣的：當我在頁面2或頁面3上時，單擊指向其他頁面的超鏈接會導致url更改，但頁面不會加載新內容。

無論我在哪個頁面上，我如何確保超鏈接的行爲一致？

Answer 1

'第2頁'和'第3頁'是同一頁（第2頁）。 URL中＃之後的任何內容都是片段標識符，片段標識符指示在加載時應將頁面發送到哪裏。

通常當你使用的變量，比如「TAB1」，你的JavaScript加載該選項卡（這超出了問題的範圍）

延伸閱讀：https://en.wikipedia.org/wiki/Fragment_identifier#Examples （獎金：注意如何您的瀏覽器直接到'Examples'部分？）

更新：在評論中，您提到想要使頁面更改看起來一致...以下代碼應該可以工作，因爲它向URL添加了一個「查詢」參數 - 雖然它仍然指向相同的文件，但瀏覽器需要刷新URL，因爲它無法確定將從Web服務器提供相同的內容。

<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>