Skip to content

Instantly share code, notes, and snippets.

@stansidel

stansidel/Hash tags for tabs and history

Last active December 14, 2015 09:09
Show Gist options
  • Save stansidel/5062598 to your computer and use it in GitHub Desktop.
Save stansidel/5062598 to your computer and use it in GitHub Desktop.
Download ZIP
A tiny script that makes tabs links on the page work as if it's the same page. They don't generate loads of history entries. It uses the History API.
Raw
Hash tags for tabs and history
<html>
<head>
<title>Test page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a.hash').on('click', function(e) {
var $this = $(this)[0];
e.preventDefault();
//window.history.location.hash="#hash";
window.history.replaceState(null, null, $this.href);
});
$('a.nohash').on('click', function(e){
e.preventDefault();
window.history.clear();
});
});
</script>
</head>
<body>
<a href="#name1" class="hash">Link1</a>
<a href="#name2" class="hash">Link2</a>
<a href="#name3" class="hash">Link3</a>
<a href="#name4" class="hash">Link4</a>
<br />
<a href="#normal">Normal link</a>
<br />
<a href="#" class="nohash">Clear history</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment