鼠标滑动选项卡多点调用特效果

[作者:caiying2007|来源:赛酷网|时间:2008-04-29| 收藏投稿 ]【大中小】

多点调用，各点激发事件不同，可以是onClick或onmouseover，可以分别设定打开页面时是否展开及初始为第几标签显示

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <style> td { font-family: "Verdana"; font-size: 9pt; padding:3px; } .tabon { background-color: #ffffff; border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3; color: #DB5B6F; font-weight: bold; } .taboff { background-color: #f5f5f5; border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3; color: #666666; font-weight: bold; } .tdbody { border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3; line-height:50px; background-color: #ffffff; } .tdbody2 { border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3; line-height:50px; background-color: #ffffff; } </style> <script language="JavaScript"> //一个页面n块tab调用show_me(), //tab_id:事件tab的id,tab_n:事件tab的标签总数，tab_name:事件tab的事件标签“特征名”// function show_me(tab_id,tab_n,tab_name){ var obj_cont=document.getElementById(tab_id).childNodes[0].childNodes;//from 0 to 6==7(<tr>) var obj_menu=obj_cont[0].getElementsByTagName("td");//feom 0 to 5==6(<td>) for (var i=0;i<tab_n;i++){ obj_menu[i].className="taboff"; obj_cont[i+1].style.display="none"; } document.getElementById("tab_"+tab_name).className="tabon"; document.getElementById("c_"+tab_name).style.display="block"; } </script> </head> <body> <style> p {color:#00f;font-weight:bold;font-size:12px;} </style> <p>tab01鼠标点击 <table border="0" cellpadding="0" cellspacing="0" width="340" id="tab1"> <tr> <td class="taboff" id="tab_woman" style="cursor:hand" onClick="show_me('tab1',6,'woman')" align="center">女装</td> <td class="taboff" id="tab_man" style="cursor:hand" onClick="show_me('tab1',6,'man')" align="center">男装</td> <td class="taboff" id="tab_sport" style="cursor:hand" onClick="show_me('tab1',6,'sport')" align="center">运动</td> <td class="taboff" id="tab_leisure" style="cursor:hand" onClick="show_me('tab1',6,'leisure')" align="center">休闲</td> <td class="taboff" id="tab_shoes" style="cursor:hand" onClick="show_me('tab1',6,'shoes')" align="center">鞋类</td> <td class="taboff" id="tab_decor" style="cursor:hand" onClick="show_me('tab1',6,'decor')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td> </tr> <tr id="c_woman" style="display:none"> <td colspan="6" class="tdbody"><a href="#">女装</a></td> </tr> <tr id="c_man" style="display:none"> <td colspan="6" class="tdbody"><a href="#">男装</a></td> </tr> <tr id="c_sport" style="display:none"> <td colspan="6" class="tdbody"><a href="#">运动</a></td> </tr> <tr id="c_leisure" style="display:none"> <td colspan="6" class="tdbody"><a href="#">休闲</a></td> </tr> <tr id="c_shoes" style="display:none"> <td colspan="6" class="tdbody"><a href="#">鞋类</a></td> </tr> <tr id="c_decor" style="display:none"> <td colspan="6" class="tdbody"><a href="#">配饰</a></td> </tr> </table> <p>tab02鼠标滑过<br> <table border="0" cellpadding="0" cellspacing="0" width="340" id="tab2"> <tr> <td class="taboff" id="tab_woman2" style="cursor:hand" onmouseover="show_me('tab2',6,'woman2')" align="center">女装</td> <td class="taboff" id="tab_man2" style="cursor:hand" onmouseover="show_me('tab2',6,'man2')" align="center">男装</td> <td class="taboff" id="tab_sport2" style="cursor:hand" onmouseover="show_me('tab2',6,'sport2')" align="center">运动</td> <td class="taboff" id="tab_leisure2" style="cursor:hand" onmouseover="show_me('tab2',6,'leisure2')" align="center">休闲</td> <td class="taboff" id="tab_shoes2" style="cursor:hand" onmouseover="show_me('tab2',6,'shoes2')" align="center">鞋类</td> <td class="taboff" id="tab_decor2" style="cursor:hand" onmouseover="show_me('tab2',6,'decor2')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td> </tr> <tr id="c_woman2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">女装</a></td> </tr> <tr id="c_man2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">男装</a></td> </tr> <tr id="c_sport2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">运动</a></td> </tr> <tr id="c_leisure2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">休闲</a></td> </tr> <tr id="c_shoes2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">鞋类</a></td> </tr> <tr id="c_decor2" style="display:none"> <td colspan="6" class="tdbody"><a href="#">配饰</a></td> </tr> </table> <p>tab03鼠标点击<br> <table border="0" cellpadding="0" cellspacing="0" width="340" id="tab3"> <tr> <td class="taboff" id="tab_woman3" style="cursor:hand" onClick="show_me('tab3',6,'woman3')" align="center">女装</td> <td class="taboff" id="tab_man3" style="cursor:hand" onClick="show_me('tab3',6,'man3')" align="center">男装</td> <td class="taboff" id="tab_sport3" style="cursor:hand" onClick="show_me('tab3',6,'sport3')" align="center">运动</td> <td class="taboff" id="tab_leisure3" style="cursor:hand" onClick="show_me('tab3',6,'leisure3')" align="center">休闲</td> <td class="taboff" id="tab_shoes3" style="cursor:hand" onClick="show_me('tab3',6,'shoes3')" align="center">鞋类</td> <td class="taboff" id="tab_decor3" style="cursor:hand" onClick="show_me('tab3',6,'decor3')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td> </tr> <tr id="c_woman3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">女装</a></td> </tr> <tr id="c_man3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">男装</a></td> </tr> <tr id="c_sport3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">运动</a></td> </tr> <tr id="c_leisure3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">休闲</a></td> </tr> <tr id="c_shoes3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">鞋类</a></td> </tr> <tr id="c_decor3" style="display:none"> <td colspan="6" class="tdbody"><a href="#">配饰</a></td> </tr> </table> <p>tab04鼠标点击,初始为第5标签显示<br> <table border="0" cellpadding="0" cellspacing="0" width="340" id="tab4"> <tr> <td class="taboff" id="tab_woman4" style="cursor:hand" onClick="show_me('tab4',6,'woman4')" align="center">女装</td> <td class="taboff" id="tab_man4" style="cursor:hand" onClick="show_me('tab4',6,'man4')" align="center">男装</td> <td class="taboff" id="tab_sport4" style="cursor:hand" onClick="show_me('tab4',6,'sport4')" align="center">运动</td> <td class="taboff" id="tab_leisure4" style="cursor:hand" onClick="show_me('tab4',6,'leisure4')" align="center">休闲</td> <td class="taboff" id="tab_shoes4" style="cursor:hand" onClick="show_me('tab4',6,'shoes4')" align="center">鞋类</td> <td class="taboff" id="tab_decor4" style="cursor:hand" onClick="show_me('tab4',6,'decor4')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td> </tr> <tr id="c_woman4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">女装</a></td> </tr> <tr id="c_man4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">男装</a></td> </tr> <tr id="c_sport4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">运动</a></td> </tr> <tr id="c_leisure4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">休闲</a></td> </tr> <tr id="c_shoes4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">鞋类</a></td> </tr> <tr id="c_decor4" style="display:none"> <td colspan="6" class="tdbody"><a href="#">配饰</a></td> </tr> </table> <script language="JavaScript"> //网页打开会自动展开：“初始化”调用//不须自动展开的不调用// window.onload=function(){ show_me('tab1',6,'woman'); show_me('tab2',6,'woman2'); show_me('tab3',6,'woman3'); show_me('tab4',6,'shoes4') } </script> </body> </html>

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

Tags：

顶一下

上一篇：仿土豆视频滚动菜单(带缓动效果)

下一篇：漂亮的web编辑器