1.左边栏
css样式
*{margin:0px;padding:0px;}
a{text-decoration:none;}
#menu{width:210px;height:468px;background:#C81623;position:relative;left:70px;top:120px;}
#menu ul li{list-style:none;width:100%;height:30px;/*background:blue;*/line-height:30px;}
#menu>ul>li{/*color:white;*/font-size:14px;/*font-size:16px;*//*font-family:微软雅黑 ;*/font-family:microsoft yahei;}
#menu>ul>li>a{color:white;margin-left:10px;}
#menu>ul>li>span{float:right;margin-right:10px;color:#F7F7F7;}
#menu>ul>li:hover>a{color:#C81623;}
#menu>ul>li>ul{width:300px;height:468px;background:#CCC;/*display:none;*/position:absolute;top:0px;left:210px;display:none;}
#menu>ul>li>ul>li{height:30px;width:100%;}
#menu>ul>li>ul>li>a{color:black;margin-left:10px;}
div
script
二级联动菜单
获取第一级所有的菜单li
var lis = document.getElementById('menu').children[0].children;
遍历，给每一个li，设置over事件
for(var i=0;i
// 鼠标进入
lis[i].onmouseover = function(){
// 当前元素的背景，设置为灰色
this.style.background = '#F7F7F7';
// 子元素ul显示
this.children[2].style.display = 'block';
// console.log(this.children[0]);
}
// 鼠标离开
lis[i].onmouseout = function(){
// 取消背景
this.style.background = '';
// 当鼠标离开时，儿子ul隐藏
this.children[2].style.display = 'none';
}
}
var love = document.getElementById('menu').children[0].children[0].children[2].children;
for(var i=0;i
// 鼠标进入
love[i].onmouseover = function(){
// 当前元素的背景，设置为灰色
this.style.background = '#F7F7F7';
// 子元素ul显示
// console.log(this.children[0]);
}
// 鼠标离开
love[i].onmouseout = function(){
// 取消背景
this.style.background = '';
// 当鼠标离开时，儿子ul隐藏
// this.children[2].style.display = 'none';
}
}
2.点击换色标题栏
css样式
*{margin:0;padding:0;}
li{list-style: none;}
a{text-decoration: none;}
.skin{margin-top:50px;}
.skin>li{width:10px;height:10px;margin-right: 20px;}.skin>li:first-child{background: #f00;}
.skin>li:nth-child(2){background: #0f0;}
.skin>li:nth-child(3){background: #000;}
ul{width:500px;margin:0 auto;overflow: hidden;}
.nav{background: red;}
.nav{margin-top:10px;}
.nav>li>a{display: inline-block;width:82px;height:35px;line-height: 35px;color:#fff;
text-align: center;border-left:1px solid #fff;}
div
script
var arr=['pink','purple','yellow'];
var skin=document.querySelectorAll('.skin>li');
var nav=document.querySelector('.nav');
var body=document.querySelector('body');
for(var i=0;i
skin[i].onclick=function(){
var num=arr[i];
console.log(num);
var a=this.className;
console.log(a);
this.style.background='#fff';
b='5px solid'+'\t'+a;
console.log(b);
this.style.border=b;
console.log(this.style.border);
nav.style.background=a;
console.log(nav.style.background);
console.log(arr[num]);
body.style.background=arr[num];
}
}