您的位置：首页 > Web前端 > BootStrap

第二章使用Bootstrap的准备-tab标签小案例笔记3

2017-06-26 20:41 543 查看

概述：

学习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>

<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 展示

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

第二章 使用Bootstrap的准备-tab标签小案例 笔记3

第二章使用Bootstrap的准备-tab标签小案例笔记3