本地js和jQuery编写的网页标签的特殊效果比较
一般来说，思路很简单，即先得到节点，然后相应地处理节点。下面是完整的页面代码：原生js：
原生js选项卡
{。
保证金：10px汽车；
职位：相对；
宽度：300px；
}
UL
列表样式类型：无；
填充：0；
保证金：0；
字体：13px / 20px宋体，Arial；
颜色：# 333；
文本对齐：中心；
}
tabtltle ul {。
浮点数：左；
职位：相对；
背景：# fefefe；
背景：-webkit-gradient（线性，左上，左下，从（# fefefe），以（# ededed））；
填料：7px 15px；
边境：1px # DDD固体；
缘吧：- 1px；
光标：指针；
}
。tabtltle ul。主动{
背景：# FFF；
字体粗细：粗体；
}
Clearfix {。
}
{ clearfix：后。
显示块；
清楚：两者；
溢出：隐藏；
内容：；
}
tabconn {。
边境：1px # EEE固体；
职位：相对；
身高：100px
}
tabconn div {。
位置：绝对；
不透明性：0；
滤镜：alpha（不透明度= 0）；
填料：5px；
文本对齐：中心；
宽度：100%；
}
tabconn div.current {。
不透明性：1；
滤镜：alpha（不透明度= 100）；
}
标题1
标题两
标题三
标题四
aaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
ddddddddddddddddddddddddddddd
（函数（）{（））
var标签= document.getelementbyid（标签）；
VaR表示标签列表= tab.getelementsbytagname（div）{ 0 }。getElementsByTagName（礼）；
无功tabconn = tab.getelementsbytagname（div）{ 1 }。getElementsByTagName（div）；为（var i = 0；i < tablist.length；i++）{
表示标签列表{我}。指数=我；
表示标签列表{我}。onclick =函数（）{
ShowConn（这个指数）；
}
}
功能showconn（_index）{
VaR指标= _index；为（var j = 0；J < tablist.length；j++）{
{ }表示标签列表，类名= ；
tabconn {，}。类名= ；
tabconn {，}。风格不透明度：0；
}
tabconn {指数}。类名=电流；
{ }表示标签列表索引。类名=活跃；
}
}）；
让我们来看一下jQuery（CSS公共，jQuery库）：
jQuery选项卡
{。
保证金：10px汽车；
职位：相对；
宽度：300px；
}
UL
列表样式类型：无；
填充：0；
保证金：0；
字体：13px / 20px宋体，Arial；
颜色：# 333；
文本对齐：中心；
}
tabtltle ul {。
浮点数：左；
职位：相对；
背景：# fefefe；
背景：-webkit-gradient（线性，左上，左下，从（# fefefe），以（# ededed））；
填料：7px 15px；
边境：1px # DDD固体；
缘吧：- 1px；
光标：指针；
}
。tabtltle ul。主动{
背景：# FFF；
字体粗细：粗体；
}
Clearfix {。
}
{ clearfix：后。
显示块；
清楚：两者；
溢出：隐藏；
内容：；
}
tabconn {。
边境：1px # EEE固体；
职位：相对；
身高：100px
}
tabconn div {。
位置：绝对；
不透明性：0；
滤镜：alpha（不透明度= 0）；
填料：5px；
文本对齐：中心；
宽度：100%；
}
tabconn div.current {。
不透明性：1；
滤镜：alpha（不透明度= 100）；
}
jQuery的标签：
标题1
标题两
标题三
标题四
aaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccccccccccc
ddddddddddddddddddddddddddddd
$（文档）Ready（函数（）{）
tabtitle = $（var $ '选项卡标题）找到（李）；
VaR表示标签列表= $（$'。康> div）；
tabtitle.click美元（函数（）{（）
tabtitle.each美元（函数（）{（）
tabtitle.removeclass美元（主动的）；
}）；
VaR指标= tabtitle.index美元（这）；
$（这）AddClass（主动的）；
tablist.eq美元（指数），AddClass（当前的），兄弟姐妹（）RemoveClass（当前的）；
}）；
}）；
这不是更容易吗！
以上是本文的全部内容，希望大家能喜欢。