tab切换

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="bootstrap.min.css">
  9.     <script src="jquery-2.1.0.min.js"></script>
  10.     <script src="bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13.     <!-- tab标签 -->
  14.     <ul id="myTab" class="nav nav-tabs">
  15.         <li class="active">
  16.             <a href="#home" data-toggle="tab">
  17.                 Microsoft
  18.             </a>
  19.         </li>
  20.         <li>
  21.             <a href="#ios" data-toggle="tab">
  22.                 NET CORE
  23.             </a>
  24.         </li>
  25.     </ul>
  26.     <!-- 每个tab页对应的内容 -->
  27.     <div id="myTabContent" class="tab-content">
  28.         <div class="tab-pane fade in active" id="home">
  29.             <p>
  30.                 微软，是一家美国跨国科技公司，也是世界PC（Personal Computer，个人计算机）软件开发的先导，由比尔·盖茨与保罗·艾伦创办于1975年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
  31.             </p>
  32.         </div>
  33.         <div class="tab-pane fade" id="ios">
  34.             <p>
  35.                 NET CORE 是一个由微软公司开发和发布的跨平台框架。
  36.             </p>
  37.         </div>
  38.     </div>
  39.     <script>
  40.         $('#myTab a').click(function (e) {
  41.             e.preventDefault()
  42.             $(this).tab('show')
  43.         })
  44.     </script>
  45. </body>
  46. </html>

Bootstrap —— tab切换的更多相关文章

  1. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  2. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  3. bootstrap中tab切换的使用

    文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...

  4. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  5. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

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

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

  7. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  8. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  9. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

随机推荐

  1. EPSG、SRID、WKT的概念

    转自:http://www.cnblogs.com/jackdong/archive/2010/12/20/1911558.html EPSG:European Petroleum Survey Gr ...

  2. Hibernate命名策略

    hibernate的命名策略,可以减少对数据库标识符命名的维护,进一步减少这部份命名的重复性代码量,以提高维护. hibernate的命名方式,有两类,一类是显式命名,一类是隐式命名. 显式命名:在映 ...

  3. PAT甲级——A1017 Queueing at Bank

    Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...

  4. Linux TC的ifb原理以及ingress流控-转

    原文:http://www.xuebuyuan.com/2961303.html 首先贴上Linux内核的ifb.c的文件头注释:     The purpose of this driver is ...

  5. sqoop import 和export的问题

    sqoop import DB 2 hive(hdfs)是采用JDBC的过程,与传统hive区别在与多走了thrift server接口(稳定性待学习现在还比较模糊没做过大数据量测试),而export ...

  6. Leetcode221. Maximal Square最大正方形

    在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 方法一 ...

  7. leetcode 352 & leetcode 239 & leetcode 295 & leetcode 53 & leetcode 209

    lc352 Data Stream as Disjoint Intervals 可以用treemap解 key保存interval的start,value保存interval的end.分别找出当前va ...

  8. springcloud注册中心eureka

    1.前提 springcloud的注册中心是以springboot为基础搭建起来的. 开发工具:IDEA 项目管理工具:maven 2.搭建步骤 创建一个web项目(建议使用IDEA工具构建项目) 修 ...

  9. TZ_14_Feign的客户端和Feign的负载均衡

    1.作用:Feign可以把Rest的请求进行隐藏,伪装成类似SpringMVC的Controller一样.你不用再自己拼接url,拼接参数等等操作,一切都交给Feign去做. 2.导入起步坐标 < ...

  10. poj 1654 Area(求多边形面积 && 处理误差)

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16894   Accepted: 4698 Description ...