滑动式的选项卡演示代码：Easy Tabs示例

发布时间：2018-08-28 09:50:25 所属栏目：政策来源：站长网

导读：一款滑动式的选项卡演示代码，类似于之前我们据说的滑动门，作者给它取名为：Easy Tabs，看上去还是比较最简单的选项卡样式，来自国外网站，没有汉化，界面为英文，稍带点动画的感觉，实际运用的价值不是太大，仅供大家参考和学习。演示： !DOCTYPE htmlh

　　一款滑动式的选项卡演示代码，类似于之前我们据说的滑动门，作者给它取名为：Easy Tabs，看上去还是比较最简单的选项卡样式，来自国外网站，没有汉化，界面为英文，稍带点动画的感觉，实际运用的价值不是太大，仅供大家参考和学习。

　　演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <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('VeryHuo1').className='tab1 tabactive'; document.getElementById('VeryHuo2').className='tab2'; document.getElementById('VeryHuo3').className='tab3'; document.getElementById('VeryHuo4').className='tab4'; }else if (wert=='2'){ document.getElementById('VeryHuo1').className='tab1'; document.getElementById('VeryHuo2').className='tab2 tabactive'; document.getElementById('VeryHuo3').className='tab3'; document.getElementById('VeryHuo4').className='tab4'; }else if (wert=='3'){ document.getElementById('VeryHuo1').className='tab1'; document.getElementById('VeryHuo2').className='tab2'; document.getElementById('VeryHuo3').className='tab3 tabactive'; document.getElementById('VeryHuo4').className='tab4'; } else if (wert=='4'){ document.getElementById('VeryHuo1').className='tab1'; document.getElementById('VeryHuo2').className='tab2'; document.getElementById('VeryHuo3').className='tab3'; document.getElementById('VeryHuo4').className='tab4 tabactive'; } } </script> </head> <body>  <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="VeryHuo1">Tab 1 </a> </li> <li><a href="#" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3');blendoff('tabcontent4');swichtabs('2');" onclick="return false;" title="" id="VeryHuo2">Tab 2 </a></li> <li><a href="#" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4');swichtabs('3');" onclick="return false;" title=""id="VeryHuo3">Tab 3 </a> </li> <li><a href="#" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2');blendoff('tabcontent3');swichtabs('4');" onclick="return false;" title=""id="VeryHuo4" >Tab 4 </a> </li> </ul> </div>   <div style="display:block;" id="tabcontent1"> Tabcontent 1 </div>   <div style="display:none;" id="tabcontent2"> Tabcontent 2 </div>   <div style="display:none;" id="tabcontent3"> Tabcontent 3 </div>   <div style="display:none;" id="tabcontent4"> Tabcontent 4 </div>  </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：52站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!