使用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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
Node.js实现文件上传
Jul 05 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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 strtr() 函数使用说明
2008/11/21 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python实现备份文件实例
2014/09/16 Python
python人人网登录应用实例
2014/09/26 Python
python内存管理分析
2015/04/08 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python笔记之工厂模式
2019/11/20 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
园林毕业生自我鉴定范文
2013/12/29 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年度企业工作总结
2015/05/21 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers