bootstrap之Tab选项卡
赖浩荡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab选项卡</title>
<!--引用相应的CSS和JQ插件-->
<link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/tests/vendor/jquery.min.js"></script>
<script type="text/javascript" src="dist/bootstrap.js"></script>
<script type="text/javascript" src="dist/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/npm.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
<li><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#about" data-toggle="tab">关于</a></li>
<li><a href="#contact" data-toggle="tab">联系</a></li>
</ul>
<div class="tab-content">
<!--默认选择home active-->
<div class="tab-pane active" id="home">
home
</div>
<div id="about" class="tab-pane">
about
</div>
<div id="contact" class="tab-pane">
contact
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*启用选项卡*/
$("#myTab a").click(function(e){
e.preventDefault();/*不要执行与事件有关的默认动作*/
$(this).tab('show');
})
</script>
类似资料：