Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
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;
<a href="#tab-1">Tab One</a>
<a href="#tab-2">Tab Two</a>
<div id="tab-1">
Tab one contents
<div id="tab-2">
Tab two contents
// Stop href="#hashtarget" links jumping around the page
var hashLinks = document.querySelectorAll("a[href^='#']");
[], function (link) {
link.addEventListener("click", function (event) {
history.pushState({}, "", link.href);
history.pushState({}, "", link.href);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment