如何在使用引導時刪除url中的#foofoo？

我正在使用bootstrap（版本：3.3.7）來實現簡單的導航。這是我的代碼：如何在使用引導時刪除url中的#foofoo？

<head> 
     <meta charset="UTF-8"> 
     <script src="lib/bower_components/jquery/dist/jquery.js"></script> 
     <script src="lib/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
     <link type="text/css" rel="stylesheet" href="lib/bower_components/bootstrap/dist/css/bootstrap.min.css"> 
     <title>Title</title> 
    </head> 
    <body> 
    <div class="container"> 
     <ul class="nav nav-tabs nav-justified"> 
      <li class="active"><a data-toggle="tab" href="#SNP">SNP</a> </li> 
      <li><a data-toggle="tab" href="#SSR">SSR</a> </li> 
     </ul> 
     <div class="tab-content"> 
      <div id="SNP" class="tab-pane fade in active"> 
       Something about SNP. 
      </div> 
      <div id="SSR" class="tab-pane fade"> 
       Something about SSR. 
      </div> 
     </div> 
    </div> 

    </body> 
    </html>

當我第一次來到這個頁面，Chrome瀏覽器（版本：57.0.2987.110）顯示的URL是www.foofoo.org/page1。它變成www.foofoo.org/page1#SNP或www.foofoo.org/page1#SSR而我點擊的鏈接包括ul a標籤。無論我點擊哪個鏈接（換句話說，URL始終爲www.foofoo.org/page1），如何使url成爲www.foofoo.org/page1。

來源

2017-04-26 Robin

你爲什麼不介意呢？ – DavidG

@DavidG如果我點擊SSR鏈接，網址是「www.foofoo.org/page1＃SSR」。然而，當我刷新頁面時，url仍然是'www.foofoo.org/page＃SSR'，並且它的內容會轉到SNP內容。 :) – Robin

據我所知，你希望你的URL地址在點擊鏈接後保持不變，但網頁上的內容要改變？如果是這樣，你可能需要jQuery來處理它而不刷新頁面。 – encrypted21

您可以通過在錨標記使用data-target屬性，而不是href得到同樣的效果：

<ul class="nav nav-tabs nav-justified"> 
    <li class="active"><a data-toggle="tab" data-target="#SNP">SNP</a> </li> 
    <li><a data-toggle="tab" data-target="#SSR">SSR</a> </li> 
</ul> 
<div class="tab-content"> 
    <div id="SNP" class="tab-pane fade in active"> 
     Something about SNP. 
    </div> 
    <div id="SSR" class="tab-pane fade"> 
     Something about SSR. 
    </div> 
</div>

這意味着你不會得到你的地址欄中的URL變化。不過，我會建議你離開href="#"，否則你的錨標記會表現得很奇怪。

來源

2017-04-26 12:21:10 DavidG

它的工作原理。這是我想要實現的。非常感謝你。 :) – Robin

如何在使用引導時刪除url中的#foofoo？

回答

相關問題