本文实例讲述了JS实现简单的tab切换选项卡效果。分享给大家供大家参考,具体如下:
<!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"> <meta charset="UTF-8"> <head> <title>JS自制简单使用的选项卡</title> <style type="text/css"> *{ margin:0px; padding:0px;} #tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;} #tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;} #tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;} #tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;} #tabContent{ width:390px; height:360px; padding:5px; font-size:12px;} #tabContent .hide{ display:none;} </style> </head> <body> <h1 id="what"></h1> <div id="tabWarp"> <div id="tabMenu"> <ul> <li class="curent">中餐</li> <li>西餐</li> <li>亚洲菜</li> <li>河南菜</li> </ul> </div> <div id="tabContent"> <div> <p>中餐的内容</p> </div> <div class="hide"> <p>西餐的内容</p> </div> <div class="hide"> <p>亚洲菜的内容</p> </div> <div class="hide"> <p>河南菜的内容</p> </div> </div> </div> <script> function fgTab(tabNav,tabBody){ var tabMenu=document.getElementById(tabNav); var tabTitle=tabMenu.getElementsByTagName('li'); var tabContent=document.getElementById(tabBody); var tabBody=tabContent.getElementsByTagName('div'); function switchTab(i){ tabTitle[i].onmouseover=function(){ for(j=0; j<tabTitle.length; j++){ if(i==j){ tabTitle[j].className='curent'; tabBody[j].style.display="block"; }else{ tabTitle[j].className=''; tabBody[j].style.display="none"; } } //document.getElementById('what').innerHTML = i+'<br/>'+out(); } } for( i=0; i<tabTitle.length; i++){ switchTab(i); } } function out(){ return i + '<br/>'+j; } </script> <script> fgTab('tabMenu','tabContent'); </script> </body> </html>
运行效果图如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
标签:
JS,tab切换,选项卡
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS实现简单的tab切换选项卡效果”评论...
更新动态
2024年09月27日
2024年09月27日
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《古筝佛曲》1CD[MP3][411.1MB]
- 纯音入心系列纯音乐《古筝世界名曲》1CD[MP3][38.9MB]
- 纯音入心系列纯音乐《古筝新奏-菩提妙音》1CD[MP3][112.3MB]
- 陈思安.1993-怀念福建金曲5CD【歌丽美】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 许美静.1999-快乐无罪【上华】【WAV+CUE】
- 群星.2024-Jambo.Medley(BEYOND40周年·致敬2)【Kinns】【FLAC分轨】
- 林翠萍.1991-舞曲世界2辑【星河】【WAV+CUE】
- 关智斌.2007-In.Progress【英皇娱乐】【FLAC分轨】
- 群星.2000-电影主题曲原声带·琼瑶的世界【歌林】【WAV+CUE】
- 范世錡.2024-錡妙夜(EP)【天娱传媒】【FLAC分轨】
- 谭咏麟.2000-魅力千禧演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 纯音入心系列纯音乐《器乐古筝》1CD[MP3][239MB]
- 纯音入心系列纯音乐《华夏民乐之古筝篇》1CD[MP3][192MB]