Last active
October 10, 2016 18:33
-
-
Save pimterry/f0d43c785f011a654c55e85df34e9a24 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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