首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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程序设计有所帮助。

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

- Author -

a-z

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
不得不分享的JavaScript常用方法函数集（上）
Dec 23 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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
hmac(1) openpyxl(1) 加密(1) 相对路径 (1) Mint UI(1) 面向对象(3) 相对路径(1) 解密(1) hashlib(1) requests(1)
You might like
一个SQL管理员的web接口
2006/10/09 PHP
php时间不正确的解决方法
2008/04/09 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
常用的js方法合集
2017/03/10 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
控制工程专业个人求职信
2013/09/25 职场文书
社区服务活动总结
2014/05/07 职场文书
应届生求职信范文
2014/05/26 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
学雷锋感言
2015/08/03 职场文书
60句有关成长的名言
2019/09/04 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
MySQL 逻辑备份 into outfile
2022/05/15 MySQL