网页制作中常用的几个简单的选项卡特效代码.docx

1、网页制作中常用的几个简单的选项卡特效代码网页制作中常用的几个简单的选项卡特效代码 更新日期：2007-09-05 21:32 出处：网页教学网 作者：给朋友帮忙,写了几个简单的选项卡，奉献给有需要的朋友 1）多点调用body text-align:center;.tab width:432px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc;.menu,.menu li margin:0; padding:0; height:24px; list-style:none; overflow:hidde

2、n; text-align:center;.menu border-bottom:1px solid #cccccc;.menu .default width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url( no-repeat;.menu .active width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-w

3、eight:bold; color:#FFFFFF; background:url( no-repeat;#more width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#FF0000; font-weight:normal; text-align:right.con width:422px; height:184px; margin:0 auto;function init(ids,cons,dis) document.getElementById(id

4、s).getElementsByTagName(li)0.className=active; document.getElementById(cons).innerHTML=document.getElementById(dis+l1).innerHTML;/ document.getElementById(ids).onmouseover=function()onmousOver(ids,cons,dis);/鼠标指向激发效果 document.getElementById(ids).onclick=function()onmousOver(ids,cons,dis);/点击激发效果func

5、tion onmousOver(ids,cons,dis)o = o | window.event;var obj=o.target | o.srcElement;if (obj.tagName=LI) if (obj.className=active|obj.id=more)return; var o=document.getElementById(ids).getElementsByTagName(li); for (var i=0;i=o.length-1;i+)oi.className=default obj.className=active; if (obj.className=ac

6、tive)document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML; 第一新闻 第二新闻 第三新闻 第四新闻 第5新闻 要做一个选项卡，在论坛里找了好久都没有理想的效果 所以特来问一下高手们，请大家帮帮忙！ 找了几个来改，都是头部的菜单那里太难定位了 当鼠标放上去时就变，而不用点了！ 增加了！ init(nav1,con1,div1_); 第一新闻 第二新闻 第三新闻 第四新闻 更多 要做一个选项卡，在论坛里找了好久都没有理想的效果 所以特来问一下高手们，请大家帮帮忙！ 找了几个来

7、改，都是头部的菜单那里太难定位了 当鼠标放上去时就变，而不用点了！ init(nav2,con2,div2_); 第一新闻 第二新闻 第三新闻 更多 要做一个选项卡，在论坛里找了好久都没有理想的效果 所以特来问一下高手们，请大家帮帮忙！ 找了几个来改，都是头部的菜单那里太难定位了 init(nav3,con3,div3_); Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行2）多点调用可伸缩body text-align:center;.tab width:422px; height:208px; margin:0 auto; overflow:hidden; border:1px

8、solid #cccccc;.menu,.menu li margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center;.menu border-bottom:1px solid #cccccc;.menu .default width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url( no-repeat;.menu .active width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url( no-repeat;.menu .showme,.menu .hidme width:76px; float:left; font-size:14pt;