本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下
效果图:
实现代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} div{ line-height:22px;} </style> <script language="javascript"> function $(id){ return document.getElementById(id); } function xxk(num,id,ii,iii) { //alert(ii); var dq; for(var i=1;i<=num;i++) { if(i==id){ dq=$(ii+i).className='sec'; //当前选项 $(iii+i).style.display="block"; } else { dq=$(ii+i).className='sec1'; $(iii+i).style.display="none"; } } } </script> </head> <body> <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">选项卡1</td> <td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">选项卡2</td> <td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">选项卡3</td> <td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">选项卡4</td> <td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">选项卡5</td> </tr> <tr> <td colspan="5" bgcolor="#FFFFFF"> <div id="tt1">选项卡1月在上班</div> <div id="tt2" style="display:none;">选项卡2月在上班</div> <div id="tt3" style="display:none;">选项卡3月在上班</div> <div id="tt4" style="display:none;">选项卡4月在上班</div> <div id="tt5" style="display:none;">选项卡5月在上班</div> </td> </tr> </table> <br /> <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> <tr> <td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">选项卡1</td> <td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">选项卡2</td> <td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">选项卡3</td> <td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">选项卡4</td> </tr> <tr> <td colspan="4" bgcolor="#FFFFFF"> <div id="tts1">选项卡1月在上班</div> <div id="tts2" style="display:none;">选项卡2月在上班</div> <div id="tts3" style="display:none;">选项卡3月在上班</div> <div id="tts4" style="display:none;">选项卡4月在上班</div> </td> </tr> </table> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《古筝与现代音乐的交织》1CD[MP3][96MB]
- 王俪婷.2011-ROMANCE【华研国际】【WAV+CUE】
- 狮子合唱团.2016-LION(引进版)【华纳】【WAV+CUE】
- 范文芳.1996-FNNTASY【HYPE】【WAV+CUE】
- 纯音入心系列纯音乐《韵味古筝曲》1CD[MP3][146.2MB]
- 纯音入心系列纯音乐《古筝系列-传统乐曲》1CD[MP3][974.7MB]
- 纯音入心系列纯音乐《古筝系列-弦凝指咽声停处》1CD[MP3][656.5MB]
- 群星.1994-大烂片2辑【派森】【WAV+CUE】
- 吴倩莲.1997-望爱【EMI百代】【WAV+CUE】
- 杨千嬅.2002-万紫千红演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郭采洁.2015-Begin.Again爱造飞鸡【华纳】【FLAC分轨】
- 许志安.2011-ON.AND.ON【东亚】【WAV+CUE】
- 潘秀琼.1994-木兰从军【名将】【WAV+CUE】
- 纯音入心系列纯音乐《古筝系列-当流行乐遇到古筝》1CD[MP3][1.9GB]
- 纯音入心系列纯音乐《精选古筝名曲100首》1CD[MP3][388.7MB]