從url中刪除哈希ID

我有一個菜單標題，當你點擊其中一個菜單鏈接時，它會指向另一個頁面（我想要的），因爲它找到相關的div id名稱。我想知道是否有一種方法來清理網址，因此它不包含#id在我的網址？試過window.location散列，這使它從滾動中分離出來，並在URL中留下＃。這裏是我有：從url中刪除哈希ID

在我的菜單：<li><a href="about#scroll-to" ....

而且對有關網頁，它向下滾動到一個div被稱爲＃滾動到.. <div id="scroll-to"></div>

任何建議將是巨大的。謝謝！

來源

2013-05-20 user2212564

這可能是比它的價值更麻煩，但你可以使用[History.js]（http://balupton.github.io/ history.js /演示/）。 – bdesham

使用jQuery，你可以在單擊菜單時對目標頁面進行POST調用。

POST數據將包含您要滑動到的div的ID。

在您的目標頁面上，使用您的服務器語言（php，asp）在js變量中輸出該id，並使用jQuery將該id輸出到準備好文檔的幻燈片上。

然後你將有一個乾淨的網址，並滾動到你的div頁面。編號：代碼如下！

當點擊一個菜單項時，讓我們使用jquery創建一個POST到目標頁面。我們將添加一個類，讓我們說，「mymenuitem」。我們將把這個類添加到菜單中的鏈接中。因此，我們將有

<li><a href="YOURTARGETPAGE.HTML#scroll-to" onClick="javascript:return false;" class="mymenuitem">Information about us</a></li>

（的的onClick停止鏈接從手動重定向）和一個空的形式（把它放在<體>後）

<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>

然後我們將創建neccessary jQuery的，所以當單擊類「mymenuitem」的< a>標籤，我們將向目標頁面發佈POST。

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(".mymenuitem").click(function() { 

    // we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to" 
    var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1]; 

    // lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id) 

    $("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">'); 
    $("#slidinganchorform").submit(); 
    }); 
}); 
</script>

那麼在我們YOURTARGETPAGE.HTML我們會碰到這樣的（假設我們使用PHP）

<head> 

<!-- make sure your jquery is loaded ;) --> 

<?php 
if($_POST['anchorid']!='') 
{ 
?> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    // lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>) 
    var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top; 
    // Lets scroll 
    jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow'); 
}); 
</script> 
<?php 
} 
?> 
</head>

務必正確的ID必須存在;）

<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>

（刪除你的舊代碼，因爲我改變了一些變量名稱，如果以前版本中有部分代碼，將會很難調試。從頭開始編寫一切）

來源

2013-05-20 12:56:48 Sharky

我添加了一些代碼，看看它 – Sharky

Heya，我已經有了你的代碼片段，這就是發生了什麼......它的工作原理和滾動緩慢的ID只有在即時通訊在目標網頁上，然後再次點擊鏈接（所以我們知道該功能的作品），但如果我不在目標網頁上，並點擊'目標鏈接'＃滾動到仍然顯示在網址中並跳轉到ID。奇怪，因爲我已經測試確定，我們可以看到它只在目標頁面上工作。你有什麼建議可以解決問題嗎？我也提醒了變量等等，一切似乎很好:) – user2212564

@ user2212564請再次看到從開始代碼。我改變了它，現在它可以工作。顯然以前版本的jquery非ajax發佈不起作用。這一個應該工作:) – Sharky

你可以做到這一點，當新頁面加載

history.pushState("", document.title, window.location.pathname);

但是這樣做也會刪除查詢字符串。雖然，你可以使用它來保持它

來源

2013-05-23 16:52:28

從url中刪除哈希ID

回答

相關問題