使用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继承--原型链继承和类式继承
Apr 08 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php错误日志简单配置方法
2016/07/11 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Python实现粒子群算法的示例
2021/02/14 Python
党员干部公开承诺书
2014/03/26 职场文书
公司授权委托书
2014/10/17 职场文书
简历自我评价优缺点
2015/03/11 职场文书
英语导游欢迎词
2015/09/30 职场文书
Python编写冷笑话生成器
2022/04/20 Python