基于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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
简单实现js放大镜效果
Jul 24 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Linux下多个Python版本安装教程
2018/08/15 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python set内置函数的具体使用
2019/07/02 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Python request中文乱码问题解决方案
2020/09/17 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
医药工作者的求职信范文
2013/09/21 职场文书
会计找工作求职信范文
2013/12/09 职场文书
《母鸡》教学反思
2014/02/25 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015选调生工作总结
2015/07/24 职场文书
golang日志包logger的用法详解
2021/05/05 Golang