基于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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
js实现筛选功能
2020/11/24 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python实现可自定义大小的截屏功能
2018/01/20 Python
flask session组件的使用示例
2018/12/25 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
民间借贷借条范本
2015/05/25 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技