Skip to content

Instantly share code, notes, and snippets.

@masaki925

masaki925/tabularize-0.html

Last active August 29, 2015 14:14
Show Gist options
  • Save masaki925/ecc5109f7f8a5d52d5fe to your computer and use it in GitHub Desktop.
Save masaki925/ecc5109f7f8a5d52d5fe to your computer and use it in GitHub Desktop.
Download ZIP
tabularize-0.html
Raw
tabularize-0.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var tabularize = function() {
var active = location.hash;
if(active) {
$(".tabs").children("div").hide();
$(active).show();
$(".active").removeClass("active");
$(".tab-link").each(function() {
if($(this).attr("href") === active) {
$(this).parent().addClass("active");
}
});
}
$(".tabs").find(".tab-link").click(function() {
$(".tabs").children("div").hide();
$($(this).attr("href")).show();
$(".active").removeClass("active");
$(this).parent().addClass("active");
return false;
});
};
$(tabularize);
</script>
</head>
<body>
<div class="tabs">
<ul>
<li class="active"><a href="#tab1" class="tab-link">Tab 1</a></li>
<li><a href="#tab2" class="tab-link">Tab 2</a></li>
<li><a href="#tab3" class="tab-link">Tab 3</a></li>
</ul>
<div id="tab1">
<h3>Tab 1</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="tab2">
<h3>Tab 2</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="tab3">
<h3>Tab 3</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment