一，效果图。

二，代码。

<!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. .NET MVC 学习笔记（一）— 新建MVC工程

    一..NET MVC 学习笔记(一)—— 新建MVC工程 接触MVC有段时间了,一直想找机会整理一下,可是限于文笔太差,所以一直迟迟羞于下手,想到最近做过的MVC项目也有一些了,花点时间整理一下方便以 ...

  2. PHP中url相关函数

    1,string urlencode(string $str)/string urldecode(string $str) urlencode将中文以及特殊字符转化为16进制,然后在每个字符前面加%: ...

  3. 微信小程序如何套用iconfont

    前言 如果你在开发微信时,没有图标的话,可以到http://www.iconfont.cn/ 官方下使用图标,那么我们去使用一些吧,到官方网址下点击使用~ 下载代码即可使用,看看下载的文件吧. 如图可 ...

  4. 处理ios的overflow滚动bug

    先说说这个bug的场景 .container{ height:100vh; overflow-y:scroll; } 没毛病,总有这种类似的情况,需要在容器内滚动,但是!这种容器内的滚动在ios上面处 ...

  5. 6个免费的C++图形和游戏库

    继上一篇,本篇同样出自zoomzum.com,具体可见http://zoomzum.com/6-free-c-graphics-and-game-libraries/,介绍了6个免费的C++图形和游戏 ...

  6. spring boot -thymeleaf-逻辑控制

    th:if th:switch

  7. 30 个java编程技巧

    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 ”if else” 判断null元素. Java 的 ...

  8. java实现网页结构分析列表发现

    现在的网站千奇百怪,什么样格式的都有,需要提取网页中的列表数据,有时候挨个分析处理很头疼,本文是一个页面结构分析的程序,可以分析处理页面大致列表结构. 废话不多说,我也不会说,show me code ...

  9. Orange——开源机器学习交互式数据分析工具

    Orange为新手和专家提供开源机器学习和数据可视化.使用大型工具箱交互式数据分析工作流程. 交互式数据可视化 Orange的全部内容都是关于数据可视化,帮助发现隐藏的数据模式,提供数据分析过程背后的 ...

  10. CentOS 部署 NodeBB

    0x00 前言 NodeBB 是基于 NodeJS 的开源 BBS 系统,可以搭配 redis 或 mongodb 数据库,本文中由于使用 NodeBB 配置中默认的 npm 安装会引起不知原因的 5 ...