基于Bootstrap实现tab标签切换效果


Posted in Javascript onApril 15, 2020

本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <script type="text/javascript" src="js/jquery.min.js" ></script>
 <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 </head>
 
 <body>
 <nav class="nav navbar-default navbar-fixed-top" role="navigation">
 <div class="container-fluid">
  <div class="navbar-header">
  <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">
   <img src="img/logo.jpg" style="height: 50px;margin-top: -15px;"/>
  </a>
  </div>
  <div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">产品</a></li>
  <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></a>
   <ul class="dropdown-menu">
   <li><a href="#">客服在线</a></li>
   <li class="divider"></li>
   <li><a href="#">常见问答</a></li>
   <li class="divider"></li>
    
   <li><a href="#">地址电话</a></li>
   </ul>
   
  </li>
  <li><a href="#">商城</a></li>
  </ul>
  
  <div class="navbar-form navbar-right">
  <a href="#" class="navbar-link">登陆</a>
  <a href="#" class="navbar-link">注册</a>
  <input type="text" class="form-control" placeholder="请输入关键字"/>
  <button class="btn btn-primary">搜索</button>
  </div>
  </div>
 </div>
 </nav> 
  
 <div style="height: 60px;"></div>
  
 <div class="container">  
  <div class="row">
  <div class="col-md-6">
   <ul id="mytab" class="nav nav-tabs">
   <li class="active">
    <a href="#xw1" data-toggle='tab'>新闻1</a>
   </li>
   <li>
    <a href="#xw2" data-toggle='tab'>新闻2</a>
   </li>
   </ul>
   <div class="tab-content">
   <div class="tab-pane active fade in" id="xw1">
    <p><a href="#">图解TPP朋友圈:美国一直有件事没坦白(图)</a><span class="pull-right">2015-10-6</span></p>
    <p><a href="#">图解TPP朋友圈:美国一直有件事没坦白(图)</a><span class="pull-right">2015-10-6</span></p>
    <p><a href="#">图解TPP朋友圈:美国一直有件事没坦白(图)</a><span class="pull-right">2015-10-6</span></p>
   </div>
   <div class="tab-pane fade" id="xw2">
    <p><a href="#">预计9月CPI增长1.8% 全年涨幅难上2%</a><span class="pull-right">2015-10-4</span></p>
    <p><a href="#">图解TPP朋友圈:美国一直有件事没坦白(图)</a><span class="pull-right">2015-10-5</span></p>
    <p><a href="#">图解TPP朋友圈:美国一直有件事没坦白(图)</a><span class="pull-right">2015-10-6</span></p>
   </div>
   </div>
  </div>
  <div class="col-md-12">
   <ul class="breadcrumb">
   <li><a href="#">最佳实践1</a></li>
   <li><a href="#">最佳实践2</a></li>
   <li ><a href="#" class="text-muted">最佳实践3</a></li>
   </ul>
  </div>
  <div class="col-md-4">
   <div class="thumbnail">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="thumbnail">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="thumbnail">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="thumbnail">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="thumbnail">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
  </div>
  <div class="col-md-4">
   <div class="col-md-6">
   <img src="img/logo.jpg" />
   <div class="caption">
    <h3><a>Bootstrap</a></h3>
    <p>这是一段对以上应用的一段简短说明文字。</p>
   </div>
   </div>
   <div class="col-md-6">
   <div class="page-header">
    <h3>这是一个新的html5的开发方法</h3> 
   </div>
   <p>loook look</p>   
   </div>
   
  </div>
  </div>
 </div>
 <script>
 //$('#mytab a[href="#xw2"]').tab('show');
 //#$('#mytab a:last').tab('show');
 $('#mytab a:eq(1)').tab('show')
 </script>
 </body>
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap程序设计有所帮助。

Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
js实现五星评价功能
Mar 08 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 #Javascript
Bootstrap编写导航栏和登陆框
May 30 #Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 #Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 #Javascript
BootStrap下jQuery自动完成的样式调整
May 30 #Javascript
JavaScript常用判断写法大全(推荐)
May 30 #Javascript
You might like
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
关于递归的一道.NET面试题
2013/05/12 面试题
非常详细的C#面试题集
2016/07/13 面试题
社区优秀志愿者材料
2014/02/02 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
村安全生产责任书
2014/08/25 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL