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

来源：互联网发布：centos虚拟机安装vbox 编辑：程序博客网时间：2024/06/10 18:25

概述：

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

效果：

阅读全文

0 0

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

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