一，效果图。

二，代码。

<!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. Learning WCF：Fault Handling

    There are two types of Execptions which can be throwed from the WCF service. They are Application ex ...

  2. rpm is for architecture aarch64 ; the package cannot be built on this system

    问题:rpm is for architecture aarch64 ; the package cannot be built on this system $ sudo alien --to-de ...

  3. 项目Alpha冲刺（团队1/10）

    项目Alpha冲刺(团队1/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  4. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  5. Math.round()，Math.ceil()，Math.floor()

    Math.round() :round周围,求一个附近的 整数 小数点后第一位 < 5 正数:Math.round(10.48)       //  10 负数:Math.round(-10.4 ...

  6. 本地调用QQ只需要一句代码

    如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...

  7. SQL-1--语句分类

  8. Shell-11--for

    $(cat /etc/passwd) `cat /etc/passwd`

  9. 【转载】MyBatis JdbcType 与Oracle、MySql数据类型对应关系详解

    [原文链接]:MyBatis JdbcType 与Oracle.MySql数据类型对应关系详解 1. Mybatis JdbcType与Oracle.MySql数据类型对应列表 2. Mybatis ...

  10. JavaScript中子类调用父类方法的实现

    一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...