一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

</head>

<body>

    <!--实例-->

    <div class="tabs">

        <a class="tab-item">

    主页

</a>

        <a class="tab-item">

    收藏

    </a>

        <a class="tab-item">设置</a>

    </div>

   <!--图标选项卡-->

<div class="tabs tabs-icon-only">

    <a class="tab-item">

<i class="icon ion-home"></i>

    </a>

    <a class="tab-item">

<i class="icon ion-star"></i>

    </a>

    <a class="tab-item">

<i class="icon ion-gear-a"></i>

    </a>

</div>

 <!--顶部图标加文字选项卡-->

<div class="tabs tabs-icon-top">

    <a class="tab-item" href="#">

        <i class="icon ion-home"></i>

        主页

    </a>

    <a class="tab-item" href="#">

        <i class="icon ion-star"></i>

        收藏

    </a>

    <a class="tab-item" href="#">

        <i class="icon ion-gear-a"></i>

        设置

    </a>

</div>

 <!--左侧图标加文字选项卡-->

 <div class="tabs tabs-icon-left">

    <a class="tab-item">

        <i class="icon ion-home"></i>

        主页

    </a>

    <a class="tab-item">

        <i class="icon ion-star"></i>

        收藏

    </a>

    <a class="tab-item">

        <i class="icon ion-gear-a"></i>

        设置

    </a>

 </div>

<!--条纹样式选项卡-->

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

    <div class="tabs">

      <a class="tab-item active" href="#">

        <i class="icon ion-home"></i>

        Test

      </a>

      <a class="tab-item" href="#">

        <i class="icon ion-star"></i>

        Favorites

      </a>

      <a class="tab-item" href="#">

        <i class="icon ion-gear-a"></i>

        Settings

      </a>

    </div>

  </div>

  <div class="tabs-striped tabs-color-assertive">

    <div class="tabs">

        <a class="tab-item active" href="#">

            <i class="icon ion-home"></i> Test

        </a>

        <a class="tab-item" href="#">

            <i class="icon ion-star"></i> Favorites

        </a>

        <a class="tab-item" href="#">

            <i class="icon ion-gear-a"></i> Settings

        </a>

    </div>

</div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic tab(选项卡)的更多相关文章

  1. Ionic入门七：ionic tab(选项卡)

    ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换.它可以包含文字和图标的组合,是一种移动设备上流行的导航方法. 1.基本用法 以下选项卡容器使用了 tabs 类,每个选项卡 ...

  2. ionic-CSS：ionic tab(选项卡)

    ylbtech-ionic-CSS:ionic tab(选项卡) 1.返回顶部 1. ionic tab(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换.它可以 ...

  3. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

  4. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  5. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  6. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  7. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  8. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  9. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

随机推荐

  1. 收藏的blog

    https://www.cnblogs.com/xifengxiaoma/tag/vue/ https://www.cnblogs.com/xifengxiaoma/p/9400200.html

  2. 3.复杂的viewpager

    实现这样的效果: 1.主页面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  3. Go语言执行流程

    Go执行流程 如果是对源代码编译后,再执行,Go的执行流程如下图 go build生成的可执行文件会在当前目录内 如果是对源代码直接执行go run 源文件操作,Go的执行流程如下图 两种执行流程的方 ...

  4. bootstrap教程，SQL

    版权声明:未经博主允许不得转载 SQL DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言 DML SELECT INSERT UPDATE DELETE Join从句 J ...

  5. 从理论到实践 全面理解HTTP/2

    前言 为了降低加载时间,相信大多数人都做过如下尝试 Keep-alive: TCP持久连接,增加了TCP连接的复用性,但只有当上一个请求/响应完全完成后,client才能发送下一个请求 Pipelin ...

  6. Java学习笔记47（JDBC、SQL注入攻击原理以及解决）

    JDBC:java的数据库连接 JDBC本质是一套API,由开发公司定义的类和接口 这里使用mysql驱动,是一套类库,实现了接口 驱动程序类库,实现接口重写方法,由驱动程序操作数据库 JDBC操作步 ...

  7. php开发中应该注意的错误开关与常见处理[开发篇]

    我们可能一开始就接触一个项目的开发,刚开始时都是信心满满,一定把这个项目做得非常完美,但是时间那么少,任务那么多,我们就只有将就了. 首先,一般情况下,我们会加一个调试标志,define('APP_D ...

  8. HoloLens开发手记－全息Hologram

    HoloLens使我们可以通过周边世界的光线和声音来创建全息场景和物体,使得它们像真实物体那样.全息场景能够响应你的凝视.手势和语音指令,同时还会和你周边世界的表面交互.借助全息场景,你可以在周边世界 ...

  9. hashcode和equals方法的区别和联系

    说到 hashcode就要和Java中的集合,HashSet,HashMap 关系最为密切. 首先附录两张Java的集合结构图: 图二:(上图的简化版) 从Set集合的特点说起 & Set是如 ...

  10. 从零开始学 Web 之 移动Web（六）响应式布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...