removing # fragment identifier from address bar
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
i just get:
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.
localScroll plugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.
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>
Add
return false;
at the end of your click function, it will stop this event propagation
the replace
function returns a new string, it doesn't operate on the old one. You need to use: 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.
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.
The best you can do if you want to remove the hash from the URI is to keep just the # at the end:
window.location.href = window.location.href.replace(/#.*/,'#');
Although in some older browsers, even this will trigger a page reload (only very old browsers, though).
try this....it will remove # globally in your url
window.location.href.replace(/\#*/g, "")
here is DEMO
精彩评论