1.   <!-- 导航头 -->
  2.   <div class="col-md-6" style="padding: 0px">
  3.      <ul id="bus" class="nav nav-tabs">
  4.         <li class="active">
  5.            <a href="#query-line" data-toggle="tab"><h4>线路查询</h4></a>
  6.         </li>
  7.         <li>
  8.            <a href="#query-station" data-toggle="tab"><h4>站点查询</h4></a>
  9.         </li>
  10.         </ul>
  11.    </div>
  12.  
  13. <!--内容-->
  14. <div id="busContent" class="tab-content">
  15.  <!-- 线路查询 -->
  16.  <div id="query-line" class="tab-pane fade in active"></div>
  17.  <!-- 站点查询 -->
  18.  <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. webpack项目怎样修改package项目名称

    使用vue-cli+webpack创建的项目,修改文件名称或者更改文件的位置,运营时会报错,是因为npm项目,在安装依赖(node_nodules)时,会记录当前的文件路径,当修改之后就无法正常启动. ...

  2. JVM——垃圾回收

    目录: 如何判断垃圾是否回收? 引用计数法 可达性分析算法 四种引用 引用队列 垃圾回收算法 标记清除算法 复制算法 标记整理算法 分代垃圾回收 新生代 老年代 Minor GC 和 Full GC的 ...

  3. 使用Flask设计带认证token的RESTful API接口

    大数据时代 Just a record. 使用Flask设计带认证token的RESTful API接口[翻译] 上一篇文章, 使用python的Flask实现一个RESTful API服务器端  简 ...

  4. Jenkins 插件加速下载

    本文主旨 看到好多加速Jenkins安装插件速度的文章,大多数教程中都是在插件配置里使用 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/up ...

  5. 单词拼接（dfs/回溯/递归）

    单词拼接传送门 //单词拼接 #include<stdio.h> #include<string.h> #include<algorithm> using name ...

  6. 第11组 Beta冲刺（2/5）

    第11组 Beta冲刺(2/5)   队名 不知道叫什么团队 组长博客 https://www.cnblogs.com/xxylac/p/11997386.html 作业博客 https://edu. ...

  7. Linux 配置eth0网卡

    缘由: 最近要复习docker,电脑没有centos7,于是下载了一个最新版的centos7,迫于强迫症没有eth0网卡,为了将ens33改为eth0于是寻求方法. 1.编辑网卡的配置文件 vi /e ...

  8. C之结构体

    #include<stdio.h> #include<stdlib.h> void study(){ printf("好好学习,天天向上 \n"); } / ...

  9. vue的路由认识

    this.$router.options.routes //获得整个路由路径对象 this.$route.matched //获得当前路由的路径对象

  10. natively 在本地机器

    ​For JavaScript-based projects, it makes sense to have a command line task runner that executes Java ...