tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="bootstrap.min.css">

    <script src="jquery-2.1.0.min.js"></script>

    <script src="bootstrap.min.js"></script>

</head>

<body>

    <!-- tab标签 -->

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

        <li class="active">

            <a href="#home" data-toggle="tab">

                Microsoft

            </a>

        </li>

        <li>

            <a href="#ios" data-toggle="tab">

                NET CORE

            </a>

        </li>

    </ul>

    <!-- 每个tab页对应的内容 -->

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

        <div class="tab-pane fade in active" id="home">

            <p>

                微软，是一家美国跨国科技公司，也是世界PC（Personal Computer，个人计算机）软件开发的先导，由比尔·盖茨与保罗·艾伦创办于1975年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

            </p>

        </div>

        <div class="tab-pane fade" id="ios">

            <p>

                NET CORE 是一个由微软公司开发和发布的跨平台框架。

            </p>

        </div>

    </div>

    <script>

        $('#myTab a').click(function (e) {

            e.preventDefault()

            $(this).tab('show')

        })

    </script>

</body>

</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. JZOJ5918【NOIP2018模拟10.20】Car

    题目 最近比较懒,题目描述都直接截图了. 题目大意 给你一棵树,还有树上的几条路径,一条路径上的点到路径上其它任意点的代价为111.然后是一堆询问,问从一个点到另一个点的最小代价. 思路 一开始做这题 ...

  2. Python pylint的安装和使用

    Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之 ...

  3. China Final J - Mr.Panda and TubeMaster

    和一般的管道不同 不能类似“无限之环”或者“弯弯国”的建图,因为这两个题都是某些位置必须有,或者必须没有 但是本题可以有的位置随意,不能限制某个位置要么流2,要么流0,(实际上可能流了1过去) 所以建 ...

  4. 19-10-24-H

    H H H H H H ZJ一下: T1只会暴力,测试点分治. (表示作者的部分分并没有给够,暴力加部分表按测试点分类可以得60吧……) T2先直接手玩第一个子任务. 然后就$Find$了一个神奇的( ...

  5. PHP的垃圾回收机制（开启垃圾回收机制后的优缺点是什么）

    PHP的垃圾回收机制(开启垃圾回收机制后的优缺点是什么) 一.总结 一句话总结: 拿时间换空间:针对内存泄露的情况,可以节省大量的内存空间,但是由于垃圾回收算法运行耗费时间,开启垃圾回收算法会增加脚本 ...

  6. Spring注解驱动开发(五)-----扩展原理

    扩展原理 1.BeanPostProcessor-----bean后置处理器,bean创建对象初始化前后进行拦截工作的 2.BeanFactoryPostProcessor-----beanFacto ...

  7. 组件：组合slot

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  8. Scrapy下载图片及自定义分类下载路径

    配置下载图片的流程如下 在items中定义两个属性,image_urls 和images .image_urls是用来存储需要下载的图片url链接,列表类型: 当文件下载完成后会把相关下载信息存入im ...

  9. Redis学习01——介绍与搭建环境

    Redis学习01介绍与搭建环境一简介二yum配置已经配置了的可以跳过三安装gcc四安装redis1 上传Redis到linux中2 解压到usrlocal下3 编译redis4 安装redis5 拷 ...

  10. HDU3374 字符串最大最小表示法模板

    一开始没太看懂什么意思,拿笔反复推了一遍才大概知道最大最小表示法是怎么求的,感觉太神奇了... #include <iostream> #include <cstdio> #i ...