接下来为大家分享的是Bootstrap中的标签页插件。
<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>标签页插件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
a:focus{
outline: none;
}
</style>
</head>
<body style="margin:200px;">
<!-- 方法一：胶囊 -->
<!-- <ul class="nav nav-pills">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">Jquery</a></li>
<li><a href="#extjs" data-toggle="tab">Extjs</a></li>
</ul> -->
<!-- 方法二：格子且有data-toggle事件 -->
<!-- <ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">Jquery</a></li>
<li><a href="#extjs" data-toggle="tab">Extjs</a></li>
</ul> -->
<!-- 方法三：格子但无data-toggle事件 -->
<ul class="nav nav-tabs" id="nav">
<li class="active"><a href="#html5">HTML5</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li><a href="#jquery">Jquery</a></li>
<li><a href="#extjs">Extjs</a></li>
</ul>
<!-- fade:表示有种淡入淡出的效果；in:表示一开始就出现; data-target="#myTabs";这里绑不绑定都是一样的效果 -->
<!-- 方法二 -->
<div class="tab-content" style="padding:10px;" data-target="#myTabs">
<div class="tab-pane fade in active" id="html5">这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5这是HTML5</div>
<div class="tab-pane fade" id="bootstrap">这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap这是Bootstrap</div>
<div class="tab-pane fade" id="jquery">这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery这是Jquery</div>
<div class="tab-pane fade" id="extjs">这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs这是extjs</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#nav a').on('click',function(e){
//阻止默认行为
e.preventDefault();
$(this).tab('show');
})
$('#nav a').on('show.bs.tab',function(){
alert('即将点击切换到这里！');
})
$('#nav a').on('shown.bs.tab',function(){
alert('切换完成！');
})
</script>
</html>
效果如下：
