<!-- 导航头 -->

  <div class="col-md-6" style="padding: 0px">

     <ul id="bus" class="nav nav-tabs">

        <li class="active">

           <a href="#query-line" data-toggle="tab"><h4>线路查询</h4></a>

        </li>

        <li>

           <a href="#query-station" data-toggle="tab"><h4>站点查询</h4></a>

        </li>

        </ul>

   </div>

<!--内容-->

<div id="busContent" class="tab-content">

 <!-- 线路查询 -->

 <div id="query-line" class="tab-pane fade in active"></div>

 <!-- 站点查询 -->

 <div id="query-station" class="tab-pane fade"></div>

tabs 导航 及内容切换的更多相关文章

  1. 使用附加导航(affix)实现内容切换

    <!DOCTYPE html> <html> <head> <title> new document </title> <meta c ...

  2. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  3. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 3、IOS开发--iPad之仿制QQ空间 （为HomeViewController添加交互逻辑 并 为导航条内容添加UISegmentedControl）

    1. 为bottomMenu添加点击效果 思路描述:        需求:        点击BottomButton的三个item,然后对应响应的是HomeViewController弹出对应的业务 ...

  6. jQuery----左侧导航栏面板切换实现

    页面运行结果:                                                      点击曹操 点击刘备 点击孙权 原图 需求说明:原图如上所示,点击一方诸侯的时候 ...

  7. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  8. [js]顶部导航和内容区布局

    自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. 导航栏图标切换：click事件，hover事件

    最近再做一个基于angular6的项目,导航栏需求:1.hover切换图标 2.click切换图标 先用jquery实现功能,在在angular组件里面实现. demo如下: <!DOCTYPE ...

随机推荐

  1. [Luogu] 贪婪大陆

    https://www.luogu.org/problemnew/show/P2184 区间修改时只需修改区间端点的numl或numr值 区间查询x-y只需用1-y的numr - 1-(x - 1)的 ...

  2. luoguP4778 Counting swaps

    题目链接 题解 首先,对于每个\(i\)向\(a[i]\)连边. 这样会连出许多独立的环. 可以证明,交换操作不会跨越环. 每个环内的点到最终状态最少交换步数是 \(环的大小-1\) 那么设\(f[i ...

  3. OpenDayLight Beryllium版本 下发流表实现hardtimeout

    1. 实验拓扑 2. 创建拓扑 from mininet.topo import Topo class MyTopo(Topo): def __init__(self): # initilaize t ...

  4. js面向对象入门

    通常我们写js以及调用: function init(){ console.log("init") } function load(){ console.log("loa ...

  5. MYSQL数据库基础概念

    数据库的发展史 1.萌芽阶段:文件系统 使用磁盘文件来存储数据2.初级阶段:第一代数据库 出现了网状模型.层次模型的数据库3.中级阶段:第二代数据库 关系型数据库和结构化查询语言4.高级阶段:新一代数 ...

  6. startuml 3 windows 破解教程

    1.startuml 的下载地址:http://staruml.io/download 2.下载安装之后,安装node 服务.

  7. arcgis python xlstoshp

    import xlrd # must init xlrd import arcpy # param arcpy.env.workspace = r"F:\note\python\ArcPy& ...

  8. Python 自学笔记（五）

    1.布尔值 1-1.概念 定义计算机中的逻辑判断,只有两种结果,True和False. if,while后面的判断条件就是布尔值,只有条件为True的时候才执行. 1-2.数值比较 1-3.数值运算 ...

  9. jQuery源码解读----part 2

    分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...

  10. python中的tcp示例详解

    python中的tcp示例详解  目录 TCP简介 TCP介绍 TCP特点 TCP与UDP的不同点 udp通信模型 tcp客户端 tcp服务器 tcp注意点   TCP简介   TCP介绍 TCP协议 ...