html怎么做滑动菜单栏,CSS+JS简洁实用的滑动导航栏

滑动门导航

*{

margin:0;

padding:0;

font-size:12px;

}

body{

margin:5px;

}

.Tab{

width:300px;

}

.TabBar{

width:300px;

list-style-type:none;

}

.TabBarNormal{

float:left;

width:60px;

border:1px solid #0066CC;

border-bottom:0px solid #fff;

line-height:24px;

text-align:center;

margin:0 3px;

}

.TabBarActive{

float:left;

width:60px;

border:1px solid #0066CC;

border-bottom:0px solid #fff;

background-color:#EEEEEE;

line-height:25px;

text-align:center;

margin:0 3px;

color:red

}

.TabContent{

width:100%;

height:200px;

border:1px solid #0066CC;

padding:5px;

position:absolute;

margin-top:-1px;

}

• ASP
• PHP
• AJAX

ASP源代码，欢迎来到模板无忧

PHP精品源代码

Ajax资源脚本

var activeTab =1;

var activeTabContent = 1;

var i;

for (i=2;i<=3;i++) {

document.getElementById("tabContent"+i).style.display="none";

}

function showTabContent(n) {

document.getElementById("tabContent"+activeTabContent).style.display="none";

document.getElementById("tabContent"+n).style.display="";

activeTabContent=n;

}

function showTab(n) {

document.getElementById("tab"+activeTab).className="TabBarNormal";

document.getElementById("tab"+n).className="TabBarActive";

activeTab=n;

showTabContent(n);

}