Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head>
<style>
div:not(:target) {
display: none;
}
div:target {
display: block;
}
/* Make the div big, so we would jump, if the JS was still broken */
div {
height: 100vh;
}
</style>
</head>
<body>
<a href="#tab-1">Tab One</a>
<a href="#tab-2">Tab Two</a>
<div id="tab-1">
Tab one contents
</div>
<div id="tab-2">
Tab two contents
</div>
<script>
// Stop href="#hashtarget" links jumping around the page
var hashLinks = document.querySelectorAll("a[href^='#']");
[].forEach.call(hashLinks, function (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
history.pushState({}, "", link.href);
history.pushState({}, "", link.href);
history.back();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment