html 实现tabs选项卡,js实现的Easy Tabs选项卡用法实例

本文实例讲述了js实现的Easy Tabs选项卡用法。分享给大家供大家参考。具体如下：

本网页选项卡是Easy Tabs选项卡插件中的一个演示实例代码，是一个最简单的选项卡样式，稍带点动画色彩，希望大家喜欢哦。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tabs选项卡

/*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;}

/*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';}

/*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';

}

}

• Tab 1
• Tab 2
• Tab 3
• Tab 4

Tabcontent 1

Tabcontent 2

Tabcontent 3

Tabcontent 4

希望本文所述对大家的JavaScript程序设计有所帮助。