網頁製作中常用的幾個簡單的選項卡特效代碼(很實用)

06-20

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.webjx.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.webjx.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>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.webjx.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.webjx.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:-1var obj_tab=document.getElementById(tbs)var obj_nav=document.getElementById(ids)var h_m=obj_nav.offsetHeight+2var 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>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.webjx.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.webjx.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_nvar H=200,h_m=24var 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>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.webjx.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.webjx.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=0function 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_nextfunction 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>
推薦閱讀：

※今天教大家如何在網頁上添加表格
※金融網頁版直播間搭建
※網站建設— 4 終於等到上傳網站內容了
※flash里插入GIF動畫為什麼老有幾張圖重疊了？？？ - 網頁製作 - 電腦/數碼 -...
※（最新整理）國內網頁設計網站網址大全 - Web 開發 / HTML(CSS)

TAG:代碼 | 實用 | 簡單 | 網頁 | 網頁製作 |