一，效果图。

二，代码。

<!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. JQuery下载及选择器总结

    JQuery下载 JQuery只是一个JS函数库,要使用其中的方法还是要在JS文件中进行调用. 一般去https://mvnrepository.com/这个网站下载,搜索JQuery就能找到JS文件 ...

  2. linux下编写C++程序播放音频

    参考: https://blog.csdn.net/zlyaxixuexi/article/details/79014441 格式转换: https://www.media.io/zh/

  3. 机器学习&深度学习之路

    计划最近好好按步骤按阶段系统性的学习下机器学习和深度学习,希望能坚持下去. 2019-01-05 基于TensorFlow的深度学习系列教程 2--常量Constant 2019-01-03 深度学习 ...

  4. 1.viewpager

    ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view. ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类. ...

  5. [CocoaPods]入门

    什么是CocoaPods? CocoaPods管理Xcode项目的库依赖项. 项目的依赖项在名为Podfile的单个文本文件中指定.CocoaPods将解析库之间的依赖关系,获取生成的源代码,然后在X ...

  6. Shell-11--for

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

  7. scikit-image 图像处理库介绍

    今天学习图像处理的时候,无意中看到了scikit 软件包,抱着学习的态度,这里做个记录,方便以后翻阅. 概念:scikit-image 是一种开源的用于图像处理的 Python 包.它包括分割,几何变 ...

  8. MarkDown基础语法记录

    基础语法记录,其中有一些博客园暂不支持 <!--标题--> # 一级标题 # ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 一级标题 ...

  9. Liferay7 BPM门户开发之23: 了解内置工作流（Kaleo Workflow）

    Liferay内置的工作流是企业版的功能,虽然简单粗糙,但依然不支持社区版.既然要用更强大的Activiti来替代它,那就非常有必要学习一下内置工作流的一些思想,以便借鉴. 它的特点: 实体的工作流操 ...

  10. html2canvas的踩坑之路

    html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...