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

2007-10　　作者：佚名　　来源：不详　网友评论　

给朋友帮忙,写了几个简单的选项卡，奉献给有需要的朋友
1）多点调用

<html> <head> <style> 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: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('http://www.58mb.com/upfiles/20070905/20070905212648_01.jpg') 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('http://www.58mb.com/upfiles/20070905/20070905212705_02.jpg') 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; } </style> <head> <body> <script> function init(ids,cons,dis){ document.getElementById(ids).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);}//点击激发效果 } function 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++){o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;} } } </script>  <div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class='default'>第5新闻</li> </ul> <div class='con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div1_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div1_l5"> <span>增加了！</span> </div> </div> <script> init('nav1','con1',"div1_"); </script>  <div class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> <script> init('nav2','con2',"div2_"); </script>  <div class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> </div> <script> init('nav3','con3',"div3_"); </script> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2）多点调用—可伸缩

<html> <head> <style> body { text-align:center; } .tab { width:422px; height:208px; margin:0 auto; overflow:hidden; border:1px 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('http://www.58mb.com/upfiles/20070905/20070905212648_01.jpg') 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('http://www.58mb.com/upfiles/20070905/20070905212705_02.jpg') no-repeat; } .menu .showme,.menu .hidme{ width:76px; float:left; font-size:14pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#0000FF; text-align:right; font-weight:bold; } .con { width:422px; height:184px; margin:0 auto; } </style> <head> <body> <script> var tb_h=new Array() function init(ids,cons,dis,hids,tbs){ document.getElementById(ids).getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,hids);}//鼠标指向激发效果 // document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis,hids);}//点击激发效果 var obj_tab=document.getElementById(tbs) tb_h[tbs]=obj_tab.offsetHeight; } function onmousOver(ids,cons,dis,hids){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ if (obj.className=='active'||obj.id==hids)return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-2;i++){o[i].className='default'} obj.className='active'; if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;} } } function show_con(tbs,ids,hids){ var obj_click=document.getElementById(hids); obj_click.innerHTML=(obj_click.innerHTML=="+")?"-":"+" obj_click.className=(obj_click.className=='showme')?'hidme':'showme' var hid=(obj_click.className=='showme')?1:-1 var obj_tab=document.getElementById(tbs) var obj_nav=document.getElementById(ids) var h_m=obj_nav.offsetHeight+2 var H=tb_h[tbs] var n=20,t=50; var timers=new Array(n); if (hid<0){ for(var i=0;i<n;i++){( function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){obj_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);},(i+1)*t); } )()}; } if (hid>0){ for(var i=0;i<n;i++){( function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){obj_tab.style.height=h_m+Math.round(H*(j+1)/n);},(i+1)*t); } )()}; } } </script>  <div id='tab1' class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="hid1" class="showme"style="width:160px" onclick="show_con('tab1','nav1','hid1')">-</li> </ul> <div class='con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> </div> <script> init('nav1','con1',"div1_","hid1",'tab1'); </script>  <div id='tab2' class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="hid2" class="showme" onclick="show_con('tab2','nav2','hid2')">-</li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> <script> init('nav2','con2',"div2_","hid2",'tab2'); </script>  <div id='tab3' class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="hid3" class="showme" onclick="show_con('tab3','nav3','hid3')">-</li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div3_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> <script> init('nav3','con3',"div3_","hid3",'tab3'); </script> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3）多点调用—折叠

<html> <head> <style> 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: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('http://www.58mb.com/upfiles/20070905/20070905212648_01.jpg') 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('http://www.58mb.com/upfiles/20070905/20070905212705_02.jpg') no-repeat; } .menu .showme,.menu .hidme{ width:76px; float:left; font-size:14pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#0000FF; text-align:right; font-weight:bold } .con { width:422px; height:0px; margin:0 auto; } .tab0{ height:208 } </style> <head> <body> <script> var show_n var H=200,h_m=24 var n=20,t=50; function init(ids,cons,dis,tbs,show_me){ document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,tbs);} document.getElementById(ids).onclick=function(){show_con(ids,cons,dis,tbs);} if (show_me!=0){show_n=tbs; document.getElementById(ids).getElementsByTagName('li')[0].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; document.getElementById(tbs).style.height=H } else{ document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; document.getElementById(tbs).style.height=h_m; } } function onmousOver(ids,cons,dis,tbs){ o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ if (obj.className=='active')return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-1;i++){o[i].className='default'} obj.className='active'; if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;} obj.onmouseout=function(){if (show_n!=tbs)this.className='default';} } } function show_con(ids,cons,dis,tbs){ var obj_show_tab=document.getElementById(tbs) var obj_hid_tab=document.getElementById(show_n) if (show_n!=tbs){ var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li') for (var i=0;i<=o.length-1;i++){o[i].className='default'} show_n=tbs; var obj=event.srcElement; document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML; var timers=new Array(n); for(var i=0;i<n;i++){( function(){ if(timers[i]) clearTimeout(timers[i]); var j=i; timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n); obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n);},(i+1)*t); } )()}; } } </script> <div class="tab0">  <div id='tab1' class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> </ul> <div class='con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> </div> <script> init('nav1','con1',"div1_",'tab1',1); </script>  <div id='tab2' class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class="default">第5新闻</li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div2_l5"> <span>增加了！</span> </div> </div> <script> init('nav2','con2',"div2_",'tab2',0); </script>  <div id='tab3' class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div3_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> </div> <script> init('nav3','con3',"div3_",'tab3',0); </script> <script> //show_con(show_n) </script> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

4）多点调用_各自循环

<html> <head> <style> 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: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('http://www.58mb.com/upfiles/20070905/20070905212648_01.jpg') 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('http://www.58mb.com/upfiles/20070905/20070905212705_02.jpg') no-repeat; } #more { width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('bg.jpg') no-repeat; color:#FF0000; text-align:right; font-weight:normal } .con { width:422px; height:184px; margin:0 auto; } </style> <head> <body> <script> var obj_temp=new Array() var a_n=0 function init(ids,cons,dis,tt){ document.getElementById(ids).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).onmouseout=function(){timer_next=setTimeout(" next_d()",1000);} var li_o=document.getElementById(ids).getElementsByTagName('li'); var li_n=li_o.length-1 for (var m=0;m<li_o.length;m++)if (li_o[m].id=='more')li_n--; obj_temp[a_n]=new Array(ids,cons,dis,tt,li_n,0,1);a_n++ } function onmousOver(ids,cons,dis){ clearTimeout(timer_next) o = o || window.event; var obj=o.target || o.srcElement; if (obj.tagName=='LI'){ var id_=obj.parentElement.id; if (obj.className=='active'||obj.id=='more')return; var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-1;i++){if (o[i].id!='more')o[i].className='default'} obj.className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML; for (var i=0;i<=o.length-1;i++){ if (o[i].className=='active')var a_n_=i } for (var kk=0;kk<=obj_temp.length-1;kk++){ if (obj_temp[kk][0]==id_){obj_temp[kk][5]=a_n_;} } } } next_d() var timer_next function next_d(){ for (var kk=0;kk<=obj_temp.length-1;kk++){ obj_temp[kk][6]+=1; if (obj_temp[kk][6]>=obj_temp[kk][3]){ obj_temp[kk][6]=1; obj_temp[kk][5]=(obj_temp[kk][5]>=obj_temp[kk][4])?0:obj_temp[kk][5]+1 li_chang(obj_temp[kk][0],obj_temp[kk][1],obj_temp[kk][2],obj_temp[kk][5]); } } timer_next=setTimeout(" next_d()",1000) } function li_chang(ids,cons,dis,j){ var o=document.getElementById(ids).getElementsByTagName('li'); for (var i=0;i<=o.length-1;i++) if (o[i].id!='more')o[i].className='default'; o[j].className='active'; document.getElementById(cons).innerHTML=document.getElementById(dis+o[j].id).innerHTML; } </script>  <div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class='default'>第5新闻</li> </ul> <div class='con' id='con1'> </div> </div> <div style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div1_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div1_l5"> <span>增加了！</span> </div> </div> <script> init('nav1','con1',"div1_",1); </script>  <div class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div> <div style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> </div> <script> init('nav2','con2',"div2_",5); </script>  <div class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div> <div style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> </div> <script> init('nav3','con3',"div3_",10); </script> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论