文档章节

Tab选项卡交互示例1

eventually
 eventually
发布于 2016/03/15 23:20
字数 517
阅读 20
收藏 0

1.可读性较高的Tab选项卡结构代码

//如下结构更具语义性和可读性
<ul class="tabs">
    <li class="tab1">
        <h3>公告</h3>
        <div>tab1 content</div>
    </li>
    <li class="tab2">
        <h3>规则</h3>
        <div>tab2 content</div>
    </li>
    <li class="tab3">
        <h3>保障</h3>
        <div>tab3 content</div>
    </li>
    <li class="tab4">
        <h3>公益</h3>
        <div>tab4 content</div>
    </li>
</ul>

2.加入CSS样式

ul.tabs{list-style:none;}
ul.tabs li{clear:both;}
ul.tabs li h3{padding:0;margin:0;font-size:13px;position:absolute;height:50px;width:63px;top:0;left:0;text-indent:-9999px;cursor:hand;}
ul.tabs li div{position:absolute;top:50px;left:0;}
ul li.tab1 h3{left:0;background:url(tab_nav.png) no-repeat 0 0;}
ul li.tab2 h3{left:63px;background:url(tab_nav.png) no-repeat -63px 0;}
ul li.tab3 h3{left:126px;background:url(tab_nav.png) no-repeat -126px 0;}
ul li.tab4 h3{left:189px;background:url(tab_nav.png) no-repeat -189px 0;}
ul .tab1 h3.current{background-position:0 -50px;}
ul .tab2 h3.current{background-position:-63px -50px;}
ul .tab3 h3.current{background-position:-126px -50px;}
ul .tab4 h3.current{background-position:-189px -50px;}
//关于导航的背景使用了图片位移技术,减少了服务器与客户端之间的交互。

3.切换脚本代码

$(document).ready(function() {
    //当页面加载的时候进行初始化操作
    $("ul.tabs li div").hide();  //隐藏所有内容
    $("ul.tabs li h3:first").addClass("current");  //第一个tab的标题样式置为选中
    $("ul.tabs li div:first").show();  //显示第一个Tab内容
    //为Tab绑定点击事件
    $("ul.tabs li h3").click(function() {
        $(ul.tabs li h3).removeClass("current");  //删除所有的选中状态样式
        $(this).addClass("current");  //将当前点击的元素设为选中
        $("ul.tabs li div").hide();  //隐藏所有内容
        $(this).next().fadeIn();  //显示DIV
    });
});

解析使用javaScript onload事件和jquery ready方法的区别

(1). onload事件:需要页面元素全部加载完成才会被调用,若页面较大或者网站较慢(有大量图片或者多媒体文件),则可能出现初始化逻辑没有运行,用户就已经开始进行操作,造成体验方面的问题。

(2). ready方法:可以让开发人员在DOM初始化完成后就开始执行初始化逻辑,从而有效避免这类问题。

© 著作权归作者所有

上一篇: PS抠图篇
下一篇: CSS盒子的定位
eventually
粉丝 0
博文 30
码字总数 21399
作品 0
成都
程序员
私信 提问
Android Sliding Tab Example 示例

选项卡是一种常见的交互方式,我们可以使用Design Support Library 来实现。 首先加入依赖: 项目中会使用 ,具体请参考 Android Toolbar Example 示例。 1. Create 3 Simple Fragment 我们打...

xandeer
2017/10/13
0
0
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5K
5
AngularDart Material Design 选项卡

FixedMaterialTabStripComponent Selector: <material-tab-strip> 选项卡条组件,带有选项卡样式按钮和活动选项卡指示器。 这是材质规格中的“固定”选项卡条,它具有相同大小的选项卡按钮,...

scooplol
2018/09/11
16
0
微信小程序之scroll-view选项卡与跳转 (二)

上一篇:微信小程序之scroll-view选项卡与跳转 (一) 本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果。 scroll-view与跳转.gif (如无法查看图片,还请翻看上...

刘飞_
2017/09/30
0
0
chrome插件开发 - tab选项卡管理器

1. 前言 继上周第一次开发Chrome插件之后,我就一直寻思有什么现实问题可以用插件来解决呢?正当我在浏览器中搜索寻找灵感时,打开的众多tab选项卡令我灵光一闪。 咦,为什么不做一个插件用来...

SmallStoneSK
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部