从 url 中删除哈希 ID [英] Remove hash id from url
问题描述
我有一个菜单标题，当您单击其中一个菜单链接时，它会在找到相关 div id 名称时定向到另一页(我想要的).我想知道是否有办法再次清理 url 备份，这样它就不会在我的 url 中包含 #id?尝试 window.location 哈希，这会使其无法滚动并在 url 中留下 #.这是我所拥有的:
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
在关于页面上，它向下滚动到一个名为 #scroll-to..<div id="scroll-to"></div>
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
任何建议都会很棒.谢谢！
Any suggestions would be great. Thanks!
推荐答案
使用 jquery，您可以在单击菜单时对目标页面进行 POST 调用.
Using jquery, you can make a POST call to the target page when menu is clicked.
POST 数据将包含要滑动到的 div 的 id.
The POST data will contain the id of the div where you want to slide to.
在您的目标页面上，使用您的服务器语言(php、asp)将该 id 输出到 js 变量中，并使用 jquery 将该 id 输出到该 id 的文档就绪幻灯片上.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
然后您将拥有一个干净的 url，并且页面将滚动到您的 div.
Then you will have a clean url, and the page scrolling to your div.
---- 代码来了！
当单击菜单项时，让我们使用 jquery 对目标页面进行 POST.我们将添加一个类，比如说mymenuitem".我们将把这个类添加到菜单中的链接中.所以我们会有
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li><a href="YOURTARGETPAGE.HTML#scroll-to" onClick="javascript:return false;" class="mymenuitem">Information about us</a></li>
(onClick 阻止链接手动重定向)和一个空表格(把它放在 < body > 之后)
(the onClick stops link from redirecting manually) and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
然后我们将创建必要的 jquery 所以当 <一个 > 类为mymenuitem"的标签被点击，我们将对目标页面进行 POST.
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<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)
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use 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 ;)
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(删除你的旧代码，因为我改变了一些变量名，如果有以前版本的部分，将很难调试.从头开始写)
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
这篇关于从 url 中删除哈希 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
