本文实例讲述了js实现的Easy Tabs选项卡用法。分享给大家供大家参考。具体如下:
本网页选项卡是Easy Tabs选项卡插件中的一个演示实例代码,是一个最简单的选项卡样式,稍带点动画色彩,希望大家喜欢哦。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-Easy-Tabs-cha-menu-codes/
具体代码如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabs选项卡</title> <style type="text/css"> /*Example for a Menu Style*/ .menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;} .menu ul {margin:0px; padding:0px; list-style:none; text-align:center;} .menu li {display:inline; line-height:23px;} .menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;} .menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;} </style> <script type="text/javascript"> /*Important Function to blend the tabs in and out*/ function blendoff(idname) {document.getElementById(idname).style.display = 'none';} function blendon(idname) {document.getElementById(idname).style.display = 'block';} </script> <script type="text/javascript"> /*Function for our Tabmenu with 4 Tabs*/ function swichtabs(wert) { if (wert=='1'){ document.getElementById('tablink1').className='tab1 tabactive'; document.getElementById('tablink2').className='tab2'; document.getElementById('tablink3').className='tab3'; document.getElementById('tablink4').className='tab4'; }else if (wert=='2'){ document.getElementById('tablink1').className='tab1'; document.getElementById('tablink2').className='tab2 tabactive'; document.getElementById('tablink3').className='tab3'; document.getElementById('tablink4').className='tab4'; }else if (wert=='3'){ document.getElementById('tablink1').className='tab1'; document.getElementById('tablink2').className='tab2'; document.getElementById('tablink3').className='tab3 tabactive'; document.getElementById('tablink4').className='tab4'; } else if (wert=='4'){ document.getElementById('tablink1').className='tab1'; document.getElementById('tablink2').className='tab2'; document.getElementById('tablink3').className='tab3'; document.getElementById('tablink4').className='tab4 tabactive'; } } </script> </head> <body> <!--Start of the Tabmenu --> <div class="menu"> <ul> <li><a href="#" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('1');" onclick="return false;" title="" class="tabactive" id="tablink1">Tab 1 </a> </li> <li><a href="#" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li> <li><a href="#" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4');swichtabs('3');" onclick="return false;" title=""id="tablink3">Tab 3 </a> </li> <li><a href="#" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2');blendoff('tabcontent3');swichtabs('4');" onclick="return false;" title=""id="tablink4" >Tab 4 </a> </li> </ul> </div> <!--End of the Tabmenu --> <!--Start Tabcontent 1 --> <div style="display:block;" id="tabcontent1"> Tabcontent 1 </div> <!--End Tabcontent 1--> <!--Start Tabcontent 2--> <div style="display:none;" id="tabcontent2"> Tabcontent 2 </div> <!--End Tabcontent 2 --> <!--Start Tabcontent 3--> <div style="display:none;" id="tabcontent3"> Tabcontent 3 </div> <!--End Tabcontent 3--> <!--Start Tabcontent 4--> <div style="display:none;" id="tabcontent4"> Tabcontent 4 </div> <!--End Tabcontent 4--> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览
- 陈百强《2006世纪10星·永恒篇[环球]》[WAV整轨]
- 【新世纪钢琴】VA-GoldenOctober(Piano)(金秋十月钢琴篇)【FLAC】
- 青稞荞麦《破茧》新生代组合[WAV+CUE]
- 因系统升级后出现BUG 《FF16》PS5完全版宣布延期
- 《黑神话:悟空》周伯通!大佬用左右手分别挑战两只虎先锋
- 《黑神话:悟空》攻击动作致敬《大话西游》:这也太帅了!
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】