概述:
学习tab标签,目标就是写了有效果就行
文件结构
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab小案例</title>
<link href="../bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class=" nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"> Tab1</a></li>
<li><a href="#tab2" data-toggle="tab"> Tab2</a></li>
<li><a href="#tab3" data-toggle="tab"> Tab3</a></li>
<li><a href="#tab4" data-toggle="tab"> Tab4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><img src="../images/1.jpg"></div>
<div class="tab-pane fade" id="tab2"><img src="../images/2.jpg"></div>
<div class="tab-pane" id="tab3"><img src="../images/3.jpg"></div>
<div class="tab-pane" id="tab4"><img src="../images/4.jpg"></div>
</div>
<!-- 引入jquery.js 因为它是基于jquery -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#tab1 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('#tab2 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('#tab3 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('#tab4 a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>
总结:
1、tab标签头采用无序列表 ul, 注意class样式 nav 表示导航, nav-tabs 表示导航当中tabs,由大到小缩小范围的
2、li就是一个个tab项 class="active" 初始化的显示tab标签(该tab被选中)
3、data-toggle 表示 这个 链接是tab 标签样式,如果去掉这个不能使用
4、href="#tab1" 这个与内容 id="tab1" 对应
5、class="tab-content" 将div样式成tab内容区域, class ="tab-pane" 表示标签一个个面板
6、首先要引入jquery.js ,然后引入bootstrap.min,js ,最后才是你写js,注意这个顺序不能变。html是按顺序的读取内容的
7、$('#tab1 a') .click表示 tab1 的 a标签 绑定点击事件
8、e.preventDefault() 取消默认传播事件。 $(this).tab('show') this 表示点击的对象。 show 展示
效果: