Skip to content

Instantly share code, notes, and snippets.

@SassNinja

SassNinja/deep-linking.html

Last active September 8, 2018 22:54
Show Gist options
  • Save SassNinja/c194da0830de81a510061c99ffcb8938 to your computer and use it in GitHub Desktop.
Save SassNinja/c194da0830de81a510061c99ffcb8938 to your computer and use it in GitHub Desktop.
Download ZIP
visual test: tabs deep linking
Raw
deep-linking.html
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Tabs Deep Linking</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Tabs Deep Linking</h1>
<ul class="tabs" data-active-collapse="true" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="deeplinked-tabs">
<li class="tabs-title"><a href="#panel1d">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4d">Tab 4</a></li>
</ul>
<div class="tabs-content" data-tabs-content="deeplinked-tabs">
<div class="tabs-panel" id="panel1d">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tabs-panel" id="panel2d">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel3d">
<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
<div class="tabs-panel" id="panel4d">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment