原生js和jQuery写的网页选项特效对比

时间：2016.04.18 发布人：wezard20xx

已解决问题

谷歌wezard20xx用户在2016.04.18提交了关于“江淮悦悦原生js和jQuery写的网页选项特效对比”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-26T15:48:49。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，滴水之恩,来日我当涌泉相报！

希望以下的回答，能够帮助你。

第1个回答

用户名：ggztmk 时间：2016.04.18

总的来说思路比较简单，就是来自先获取节点，然后对节点进行相应的处理,下面是完整的页面代码：

原生js：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>原生jstab</title><styletype="text/css">.tab{margin:10pxauto;position:relative;width:300px根责器坐道测茶敌型;}ul,li{list-style-type:none;padding:0;margin:0;font:1**x/20pxSimSun,arial;color:#333;text-align:center;}.tabTltleulli{float:left;positi问答on:relat记歌季给酸始这ive;background:#fefefe;background:-斯树张余七webkit-gradient(linear,lefttop,leftbottom,from(#fefefe),to(#ededed)里镇老斗置规过西牛听);padding:7px1**x;border:1px#dddsolid;margin-right:-1px;cursor:pointer;}.tabTltleulli.active{background:#fff;font-weight:bold;}.clearfix{}.clearfix:after{display:block;clear:权可展记甚both;overflow:hidden;content:"";}.tabConn{border:1px#eeesolid;pos拿圆观互ition:rela向宜华管谁找口将儿tive;height浓思范沉罪娘或车:100px}.tabConndiv{position:absolute;opacity:0;filter:alpha(opacit载绝财政围y=0);paddi河据够木好ng:**x;text-align:center;铁阶争创客层审环善width:100%;}.tabConndiv.current晚叶目以复干银往资孙因{opacity:1;filter:alpha(opacity=100);}</style></head><body><divid="tab"class="tab"><divclass="tab断对了终早通集费Tltle"><ulclass="clearfix"><liclass="active">标题乙味溶积否一</li><li>标题二</li><li>标题三</li><li>标题四</li></ul></div><divclass=伟州面冷"tabConn"><divclass="current">aaaaaaaaaaaaaaa</div><div>bbbbbbbbbbbbbbbbbbbbbbbbbbbb断块院径总修没检培bb</div><d派清农宁翻工端高iv>ccccccccccc四翻客黑确你敌据兵严ccccccccccccccccccccc</div><div>ddddddddddddddddddddddddddddd</div></div></div><scripttype="text/j**ascript">(function(){vartab=document.getElementById("tab");vartabList=tab.getElementsByTagName("div")[0].getElementsByTagName("li");vartabConn=tab.getElementsByTagName("div")[1].getElementsByTagName("div");for(vari=0;i<tabList.length;i++){tabList[i].index=i;tabList[i].onclick=function(){showConn(this.index);}}functionshowConn(_index){varindex=_index;for(varj=0;j<tabList.length;j++){tabList[j].className="";tabConn[j].className="";tabConn[j].style.opacity=0;}tabConn[index].className="current";tabList[index].className="active";}})();</script></body></html>

下面我们来看一下jQuery写的（css**用,需要引进jQuery库）：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>jQuerytab</title><scripttype="text/j**ascript"src="js/jquery-1.8.1.min.js"></script><styletype="text/css">.tab{margin:10pxauto;position:relative;width:300px;}ul,li{list-style-type:none;padding:0;margin:0;font:1**x/20pxSimSun,arial;color:#333;text-align:center;}.tabTltleulli{float:left;position:relative;background:#fefefe;background:-webkit-gradient(linear,lefttop,leftbottom,from(#fefefe),to(#ededed));padding:7px1**x;border:1px#dddsolid;margin-right:-1px;cursor:pointer;}.tabTltleulli.active{background:#fff;font-weight:bold;}.clearfix{}.clearfix:after{display:block;clear:both;overflow:hidden;content:"";}.tabConn{border:1px#eeesolid;position:relative;height:100px}.tabConndiv{position:absolute;opacity:0;filter:alpha(opacity=0);padding:**x;text-align:center;width:100%;}.tabConndiv.current{opacity:1;filter:alpha(opacity=100);}</style></head><body><h3>jQuery写的选项:</h3><divid="tab2"class="tab"><divclass="tabTltletab-title"><ulclass="clearfix"><liclass="active">标题一</li><li>标题二</li><li>标题三</li><li>标题四</li></ul></div><divclass="tabConntab-conn"><divclass="current">aaaaaaaaaaaaaaa</div><div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div><div>cccccccccccccccccccccccccccccccc</div><div>ddddddddddddddddddddddddddddd</div></div></div><scripttype="text/j**ascript">$(document).ready(function(){var$tabTitle=$('.tab-title').find('li');var$tabList=$('.tab-conn>div');$***.click(function(){$tabTitle.each(function(){$tabTitle.removeClass('active');});varindex=$tabTitle.index(this);$(this).addClass('active');$tabList.eq(index).addClass('current').siblings().removeClass('current');});});</script></body></html>

是不是简单了好多！

以上所述就是本文的全部内容了，希望大家能够喜欢。