Skip to content

Instantly share code, notes, and snippets.

@deadcheat

deadcheat/test.html

Created January 19, 2017 15:04
Show Gist options
  • Save deadcheat/e9a5b1ce8ad90c340521438d373c089b to your computer and use it in GitHub Desktop.
Save deadcheat/e9a5b1ce8ad90c340521438d373c089b to your computer and use it in GitHub Desktop.
Download ZIP
bulma-tab＋jqueryでactive
Raw
test.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<style>
.tab-pane {
display: none;
}
.tab-pane:target {
display: block;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="tabs">
<ul>
<li class="tab"><a href="#test01">Pictures</a></li>
<li class="tab"><a href="#test02">Music</a></li>
</ul>
</div>
<div class="tab-content is-flex">
<div id="test01" class="tab-pane animated">
test1
</div>
<div id="test02" class="tab-pane animated">
test2
</div>
</div>
<script>
$(function(){
$('li.tab:first').addClass('is-active');
$('li.tab').click(function() {
$('li.tab').removeClass('is-active');
$(this).addClass('is-active');
return true;
});
$('.tab-pane:first').show();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment