基于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 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP实现网上点歌(二)
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JS作用域深度解析
2016/12/29 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
护理学院专科毕业生求职信
2014/06/28 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
村官2015年度工作总结
2015/10/14 职场文书