<!-- 导航头 -->

  <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. CF788A Functions again dp

    求一个最长子段和就完了,可以出T1? code: #include <bits/stdc++.h> #define N 100006 #define ll long long #defin ...

  2. luogu P1553 数字反转（升级版）

    P1553 数字反转(升级版) 直通 思路: 首先使用char数组进行读入,然后直接按照题目要求进行反转即可, 但要注意的是对零的处理:(有点类似于高精去除前导零) ①去除只是整数.百分数的时候,反转 ...

  3. P1484 种树——数据结构优先队列

    种了一下午的树,终于给搞明白了((多谢各位大神的题解)(题解就不能讲清楚点吗(看不见看不见))): 你有k个树,你可以种在一条直线上,每个位置都有一个价值,如果你把树种在这里就可以获得这个价值,但是条 ...

  4. eclipse使用正则表达式查找替换

    1,Eclipse ctrl+f 打开查找框2,选中 Regular expressions (正则表达式) 去掉/* */(eclipse)        /\*(.|[\r\n])*?\*/去掉/ ...

  5. 一句话题解&&总结

    CF79D Password: 差分.两点取反,本质是匹配!最短路+状压DP 取反是套路,匹配是发现可以把操作进行目的化和阶段化,从而第二次转化问题. 且匹配不会影响别的位置答案 sequence 计 ...

  6. Java的Lambda表达式

    Java的Lambda表达式 1. 什么是Lambda表达式 简单的说,Lambda表达式就是匿名方法.Lambda表达式让程序员能够使用更加简洁的代码,但是同样也使代码的可读性比较差. Lambda ...

  7. CISCO实验记录六：EIGRP路由协议

    一.要求 1.查看当前路由协议 2.清空路由设置 3.使用EIGRP协议创建路由 4.查看EIGRP的邻居表 5.关闭自动汇总 6.使用手工汇总 二.实现 1.查看当前路由协议 #show ip pr ...

  8. 从UDP的”连接性”说起–告知你不为人知的UDP

    原文地址:http://bbs.utest.qq.com/?p=631 很早就计划写篇关于UDP的文章,尽管UDP协议远没TCP协议那么庞大.复杂,但是,要想将UDP描述清楚,用好UDP却要比TCP难 ...

  9. 10 Flutter仿京东商城项目 商品分类跳转到商品列表传值 商品列表页面布局

    pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper ...

  10. 一百三十一：CMS系统之轮播图上传图片功能

    将七牛js放到common下 把获取uptoken的接口放到common视图中 把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ ' ...