使用BootStrap实现标签切换原理解析


Posted in Javascript onMarch 14, 2017

原理解析

1.定义一无序列表。取id值为myTab。

2.定义列表中a标签的目标地址为我们要展示的div对应的id

3.为a标签注册对应的事件(就是js的代码)

效果如图

使用BootStrap实现标签切换原理解析

代码如下

html代码部分

<ul id="myTab" class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#home" rel="external nofollow" data-toggle="tab">首页</a></li>
    <li role="presentation"><a href="#profile" rel="external nofollow" >介绍</a></li>
    <li role="presentation"><a href="#dropdown1" rel="external nofollow" >消息</a></li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home"><p>首页内容..</p> </div>
    <div class="tab-pane fade" id="profile"> <p>介绍内容...</p></div>
    <div class="tab-pane fade" id="dropdown1">
      <p>.消息内容..</p>
    </div>
  </div>

js部分代码

<script type="text/javascript">
   $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });
</script>

以上所述是小编给大家介绍的使用BootStrap实现标签切换原理解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
Node 代理访问的实现
Sep 19 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 #Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 #Javascript
AngularJS实现页面定时刷新
Mar 14 #Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 #Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 #Javascript
Bootstrap笔记—折叠实例代码
Mar 13 #Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 #Javascript
You might like
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
标准自荐信范文
2014/01/29 职场文书
运动会跳远加油稿
2014/02/20 职场文书
武当山导游词
2015/02/03 职场文书
交通事故责任认定书
2015/08/06 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏