Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > 网页特效 > 网页Tab选项卡特效-原生tab标签页与jQuery的tab标签页案例
隐藏/显示侧边栏

网页Tab选项卡特效-原生tab标签页与jQuery的tab标签页案例

2013-12-30 22:30    来源:未知    责任编辑:admin    字号【
常见的网页特效有:如TAB标签切换(之前的),JS展开/伸缩菜单表单隔行换色操作,JS焦点图等。
现在针对原生的js的TAB标签页和jQuery的标签页进行综合训练 和对比,这也是网站中最常见的一种网页特效了。

TAB标签页的CSS和HTML部分就不贴出来了!请直接参照特效实例链接!
原生JS的TAB标签页部分: //原生JS的tab标签页效果开始
var ul= document.getElementById("menu");
var li= ul.getElementsByTagName("li");
var content= document.getElementById("content");
var cnt = content.getElementsByTagName("div");
for (var i = 0, len=li.length; i < len; i++)
{
li[i].index = i;//设置当前li的index值
li[i].onclick = function(){
for (var i = 0; i < li.length; i++) {
li[i].className="";
cnt[i].style.display ="none"; };
this.className = "current";
cnt[this.index].style.display= "block"; };
};

jQuery的TAB标签页代码如下: //jQuery的tab标签页效果开始
$("#menu li").click(function(){
/*
//对当前的li元素增加current类,其他则移除
$(this).addClass("current").siblings().removeClass("current");
//通过当前的索引值,获取对应div的元素进行显示,其他则隐藏
$("#content div").eq($(this).index()).show().siblings().hide();
*/
//链式操作,两句合并成一句
$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();
});


通过对比jquery的链式操作,以前标签选择器的强大已经完美展现出来了!

原生JS的TAB标签页演示地址: 原生JS的TAB标签页

jQuery的TAB标签页演示地址: jQuery的TAB标签页


更多
Tags 标签: tab标签页 网页特效
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |