一，效果图。

二，代码。

<!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. 字符串拼接时使用StringBuffer还是StringBuilder？

    StringBuffer.StringBuilder和String一样,也用来代表字符串.String类是不可变类,任何对String的改变都 会引发新的String对象的生成:StringBuffe ...

  2. Android Service用法知识点的讲解

    Android Service 学习Service相关知识点: android service 的基础知识,生命周期,service分类,运行地点(本地服务,远程服务),运行类型(前台服务,后台服务) ...

  3. 鱼眼投影方式(Fisheye projection)的软件实现

    简单实现 鱼眼模式(Fisheye)和普通的透视投影(Perspective projection),一个很大的区别就是鱼眼的投影算法是非线性的(non-linear),实际照相机的情况是在镜头外面包 ...

  4. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Maven - 实例-2-使用本地仓库中的依赖包

    Maven引入构建包的流程 执行mvn compile命令编译源代码,如果编译过程中需要用到其他的包, maven将会在pom.xml文件中查找是否引入该依赖包的坐标. 示例: <depende ...

  6. Tools - OpenSSL

    OpenSSL http://www.openssl.org/ OpenSSL is an open source project that provides a robust, commercial ...

  7. TCP/IP 笔记 - 地址解析协议

    地址解析协议(ARP)提供了一种在IPv4地址和各种网络技术使用的硬件地址之间的映射.ARP仅用于IPv4,IPv6使用邻居发现协议,它被合并入ICMPv6.地址解析是发现两个地址之间的映射关系的过程 ...

  8. set 和hash_set和海量数据的处理问题

    什么样的结构决定其什么样的性质,因为set/map/multiset/multimap都是基于RB-tree之上,所以有自动排序功能, 而hash_set/hash_map/hash_multiset ...

  9. C语言第十二讲,文件操作.

    C语言第十二讲,文件操作. 一丶文件操作概述 在操作系统中,我们的文档都称为文件.操作系统也为我们提供了接口进行操作.不同语言都是使用的相同的接口,只不过封装的上层接口不一样 操作文件的步骤 打开文件 ...

  10. CSS hack兼容表

    IE6 IE7 IE8 Firefox Opera Safari !important Y Y Y Y Y _ Y * Y Y *+ Y \9 Y Y Y \0 Y nth-of-type(1) Y ...