JavaScript16

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

<ul>

<li>

<ul>[]

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

script

二级联动菜单

获取第一级所有的菜单li

var lis = document.getElementById('menu').children[0].children;

遍历，给每一个li，设置over事件

for(var i=0;i<lis.length;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.length;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

<div>

</ul>

</ul>

</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.length;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];

}

JavaScript16

推荐阅读更多精彩内容