选项卡
选项可菜单body部分
Code
简单的css
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#nav{
margin-left:150px;
margin-top:150px;
width:300px;
height:300px;
border:1px solid #669900;
}
#menu{
width:300px;
height:30px;
line-height:30px;
background-color:#999999;
color:#fff;
text-align:center;
list-style:none;
}
#menu li{
float:left;
width:75px;
cursor:pointer;
}
#menu li.over{
background-color:#009933;
}
#nav div{
width:300px;
height:270px;
display:none;
}
#nav div ul{
list-style:none;
}
#nav div.block{
display:block;
}
</style>
*{
margin:0px;
padding:0px;
}
#nav{
margin-left:150px;
margin-top:150px;
width:300px;
height:300px;
border:1px solid #669900;
}
#menu{
width:300px;
height:30px;
line-height:30px;
background-color:#999999;
color:#fff;
text-align:center;
list-style:none;
}
#menu li{
float:left;
width:75px;
cursor:pointer;
}
#menu li.over{
background-color:#009933;
}
#nav div{
width:300px;
height:270px;
display:none;
}
#nav div ul{
list-style:none;
}
#nav div.block{
display:block;
}
</style>
javascript 部分
<script type="text/javascript">
window.onload=initAll;
function initAll(){
var nav=document.getElementById("nav");
var divlist=nav.getElementsByTagName("div");
var menu=document.getElementById("menu");
var menulist=menu.getElementsByTagName("li");
divlist[0].className="block";
menulist[0].className="over";
chgMenu(0);
index=0;
for(var i=0;i<menulist.length;i++){
(function(){
var thisMenu=i;
menulist[thisMenu].onmouseover=function(){
clearTimeout(movement);
for(var j=0;j<divlist.length;j++){
if(j!=thisMenu){
menulist[j].className="";
divlist[j].className="";
}
}
this.className="over";
divlist[thisMenu].className="block";
}
menulist[thisMenu].onmouseout=function(){
chgMenu(thisMenu);
}
})();
}
for(var i=0;i<divlist.length;i++){
(function(){
var thisDiv=i;
divlist[thisDiv].onmouseover=function(){
clearTimeout(movement);
}
divlist[thisDiv].onmouseout=function(){
chgMenu(thisDiv);
}
})();
}
}
function chgMenu(k){
var nav=document.getElementById("nav");
var divlist=nav.getElementsByTagName("div");
var menu=document.getElementById("menu");
var menulist=menu.getElementsByTagName("li");
for(var i=0;i<menulist.length;i++){
divlist[i].className="";
menulist[i].className="";
}
divlist[k].className="block";
menulist[k].className="over";
k++;
if(k==menulist.length){
k=0;
}
var repeat="chgMenu("+k+")";
movement=setTimeout(repeat,500);
}
</script>
window.onload=initAll;
function initAll(){
var nav=document.getElementById("nav");
var divlist=nav.getElementsByTagName("div");
var menu=document.getElementById("menu");
var menulist=menu.getElementsByTagName("li");
divlist[0].className="block";
menulist[0].className="over";
chgMenu(0);
index=0;
for(var i=0;i<menulist.length;i++){
(function(){
var thisMenu=i;
menulist[thisMenu].onmouseover=function(){
clearTimeout(movement);
for(var j=0;j<divlist.length;j++){
if(j!=thisMenu){
menulist[j].className="";
divlist[j].className="";
}
}
this.className="over";
divlist[thisMenu].className="block";
}
menulist[thisMenu].onmouseout=function(){
chgMenu(thisMenu);
}
})();
}
for(var i=0;i<divlist.length;i++){
(function(){
var thisDiv=i;
divlist[thisDiv].onmouseover=function(){
clearTimeout(movement);
}
divlist[thisDiv].onmouseout=function(){
chgMenu(thisDiv);
}
})();
}
}
function chgMenu(k){
var nav=document.getElementById("nav");
var divlist=nav.getElementsByTagName("div");
var menu=document.getElementById("menu");
var menulist=menu.getElementsByTagName("li");
for(var i=0;i<menulist.length;i++){
divlist[i].className="";
menulist[i].className="";
}
divlist[k].className="block";
menulist[k].className="over";
k++;
if(k==menulist.length){
k=0;
}
var repeat="chgMenu("+k+")";
movement=setTimeout(repeat,500);
}
</script>
