Javascript 从地址栏中删除 # 个片段标识符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4872267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
removing # fragment identifier from address bar
提问by thom
Hi i hope someone can help. i want to hide the fragment identifier from the address bar so instead of:
嗨，我希望有人可以提供帮助。我想从地址栏中隐藏片段标识符，而不是：
www.mydomain.com/example.html#something
www.mydomain.com/example.html#something
i just get:
我只是得到：
www.mydomain.com/example.html
www.mydomain.com/example.html
when i click on an anchor tag.
当我点击一个锚标签时。
I have looked at lots of related questions and forums but still can't quite figure it out. I'm pretty sure i should be using something along the lines of:
我查看了很多相关的问题和论坛，但仍然无法弄清楚。我很确定我应该使用以下内容：
window.location.href.replace(/#.*/,''); //and or .hash
put just cannot figure it out.
把只是想不通。
localScrollplugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.
localScroll插件允许您隐藏或保留标识符，默认情况下它们是隐藏的。我认为许多画廊插件也有类似的选项。
but when i try and do it myself (bit of a novice) i get crazy to no results.
但是当我尝试自己做（有点新手）时，我会疯狂到没有结果。
below is some basic example script i would like it to work with:
下面是一些我希望它使用的基本示例脚本：
<style>
.wrap{
width:300px;
height:200px;
margin:auto;
}
.box{
width:300px;
height:200px;
position:absolute;
display:none;
}
#one{background:red;}
#two{background:blue;}
#three{background:green;}
.load{display:block;}
</style>
<body>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div class="wrap">
<div id="one" class="box load">This is Box 1</div>
<div id="two" class="box">This is Box 2</div>
<div id="three" class="box">This is Box 3</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("ul li a").click(function(){
$("div.box").fadeOut(1000);
$($(this).attr('href')).fadeIn(1000);
});
});
</script>
</body>
回答by Riccardo Galli
Add
添加
return false;
at the end of your click function, it will stop this event propagation
在您的点击功能结束时，它将停止此事件传播
回答by Jason LeBrun
the replacefunction returns a new string, it doesn't operate on the old one. You need to use: window.location.href = window.location.href.replace(/#.*/,'').
该replace函数返回一个新字符串，它不会对旧字符串进行操作。您需要使用：window.location.href = window.location.href.replace(/#.*/,'')。
However, this will not have the expected effect, as changing window.location.href in any way that's not just adding or changing a hash tag causes a page reload.
但是，这不会产生预期的效果，因为以任何方式更改 window.location.href 不仅仅是添加或更改哈希标签会导致页面重新加载。
The localScroll plugin works by searching for the hashtag and using the jQuery scrollTo plugin to scroll to the location, and preventing the default behavior of the browser when you click on a link with a hash tag. They haven't actually changed the URL to remove the hash, they've prevented it from ever appearing.
localScroll 插件的工作方式是搜索井号标签并使用 jQuery scrollTo 插件滚动到该位置，并在您单击带有井号标签的链接时阻止浏览器的默认行为。他们实际上并没有更改 URL 来删除哈希，他们阻止了它的出现。
The best you can do if you want to remove the hash from the URI is to keep just the # at the end:
如果您想从 URI 中删除散列，您可以做的最好的事情就是只保留末尾的 #：
window.location.href = window.location.href.replace(/#.*/,'#');
Although in some older browsers, even this will trigger a page reload (only very old browsers, though).
尽管在一些较旧的浏览器中，即使这样也会触发页面重新加载（尽管只有非常旧的浏览器）。
