原生js和jQuery实现简单的tab切换特效比较

tab tab通常适用于空间有限且内容更为丰富的场合，页面的美观不会给用户带来太多的视觉疲劳。

首先，建立页面元素。选项卡上单击的部分我们通常使用列表加载，包括UL和OL，我们让横向分布页签，所以我们需要使左浮动，页签内容部分装载区此外，我们需要控制与常见的通用性元素的风格和行为，所以我们有以下的DOM结构：

T1
T2
T3
T4
T5
你好!
我喜欢你！
你好世界！
你好吗
我很好，你呢

在UL左边浮动，以去除浮在随后的因素的影响，我们建立了明确的属性通过伪类，并在同一时间，即低版本增加变焦触发IE haslayout。所以有以下方式：
HTML，正文，div，UL，李边距：0；填充：0；}

缩放：1；}
CL：{显示：块；高度：0；清楚：两者；可见性：隐藏；溢出；隐藏；内容：。；}
列表样式：无；}

体{ padding-top：100px；背景：# EEE；字体：微软雅黑、Arial、Helvetica，sans-serif；}
#主要{ margin: 0 auto；宽度：800px；}
#主要# TabBar { }
#主要# TabBar李，#主要#内容。续{文本对齐：中心；颜色：# FFF；}
#主要# TabBar里{填充：0 20px；身高：35px；线高度：35px；字体大小：14px；鼠标指针；浮动：左；}
主要内容# # {身高：350px；溢出：隐藏；位置：相对；}
#主要#内容。续{宽度：100%；高度：350px；线高度：350px；字体大小：48px；Z指数：0；位置：绝对的；}

#主要# TabBar里。DEF {颜色：# 333；背景：# FFF；}
#主要# TabBar li.t1，#主要#内容。cont.t1 {颜色：# FFF；背景：# 4e6b9c；}
#主要# TabBar li.t2，#主要#内容。cont.t2 {颜色：# FFF；背景：# c52946；}
#主要# TabBar li.t3，#主要#内容。cont.t3 {颜色：# FFF；背景：# 33a6ff；}
#主要# TabBar li.t4，#主要#内容。cont.t4 {颜色：# FFF；背景：# ffab4e；}
#主要# TabBar li.t5，#主要#内容。cont.t5 {颜色：# FFF；背景：# 64bccc；}

HTML部分大致相同。

当我们使用本机js来实现时，我们主要是分别单击并单击每个LI上的事件，然后单击以使当前内容页显示，以及其他内容页隐藏和隐藏。这个过程不断地增加或降低内容的透明度，直到它被完全隐藏或显示出来为止。
在window.onload =函数（）{
var标签= document.getelementbyid（TabBar）。GetElementsByTagName（李）；
无功控制= document.getelementbyid（内容），GetElementsByTagName（div）；
VaR len = cont.length；
var标志=真；

VaR褪色=功能（元素、回调、型）{
| |类型（type = ）；
Var Px定时器；

如果（type ）
{
PX＝0；
定时器= setInterval（）{（）函数（
PX＝3；
如果（PX 100）
{
elem.style.opacity（elem.style.opacity =（PX / 100））：（元素。风格{过滤} =Alpha（透明度=+酶+）））
}
其他的
{
ClearInterval（定时器）；
elem.style.opacity（elem.style.opacity = 1）：（元素。风格{过滤} =阿尔法（不透明度100））；
回调回调（元）；
}
}，10）；
}
其他的
{
PX＝100；
定时器= setInterval（）{（）函数（
PX＝3；
如果（PX = 0）
{
Document.addEventListener（elem.style.opacity =（PX / 100））：（元素。风格{过滤} =Alpha（透明度=+酶+）））
}
其他的
{
ClearInterval（定时器）；
elem.style.opacity（elem.style.opacity = 0）：（元素。风格{过滤} =阿尔法（不透明度0））；
回调回调（元）；
}
}，10）；
}
}

为（var i = 0；i；；；；
{
续{我}。style.zindex =莱恩-我；
制表符{；
标签{我}。onclick =函数（）{
如果（国旗）
{
标志=假；
续{ }。指数。style.display =块；
淡入淡出（此索引}）；
为（var i = 0；i；；；；
{
标签{我}。类名=def；
如果（制表符{索引}！=这个。索引）
{
褪色
（
继续{ }，
功能（元）
{
elem.style.display =没有；
elem.classname =续T +（elem.index + 1）；
标志=真；
}，
退出
）；
}
}
this.classname =T+（this.index + 1）；
}
}
}
}；

从上面讲，事实上，使用原生js来操作DOM仍然比较麻烦，或者写得更少，更多的jQuery不会诞生：
$（函数（）{（））
标签= $（var# TabBar里）；
无功控制= $（#内容。续）；
VaR len = cont.length；

cont.each（功能（INX，元素）{ $（元）。Css（z-index，莱恩- INX）；}）（，和），隐藏（，和）（。情商）（1）（显示）；

Tabs.click（function（）{（）
VaR在= tabs.index（本）；
Tabs.removeAttr（类）。AddClass（def）。AndSelf（），Eq（X + 1）。AddClass（T+（X + 1））；
cont.fadeout（300），（这）。AndSelf（），Eq（在）FadeIn（300）；
}）；
}
）；

这个例子比较简单，但是很实用。当然，在实践中，我们通常不会这样写。我们通常使用它作为封装可重用控件的基础，但基本思想保持不变。

以上是本文的全部内容，希望大家能喜欢。