Skip to content

Instantly share code, notes, and snippets.

@wub

wub/levels.io

Created October 12, 2014 11:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wub/40d4e26a5196c0730586 to your computer and use it in GitHub Desktop.
Save wub/40d4e26a5196c0730586 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
levels.io
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul class="tabs">
<li data-display="foo">FOO</li>
<li data-display="bar">BAR</li>
<li data-display="baz">BAZ</li>
</ul>
<div class="tab" data-content="foo">
Foo content
</div>
<div class="tab" data-content="bar">
Bar content
</div>
<div class="tab" data-content="baz">
Baz content
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$tabs = $('.tabs li');
$(document).on('click', $tabs, function (e) {
tab = $(e.target);
$tabs.removeClass('active');
tab.addClass('active');
$('.tab').hide();
$('[data-content="'+ tab.data('display') +'"').show();
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment