1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式，并加入背景图片。
4、为li添加id，创建函数fun ，并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
<style>
.clearfix::after {
display: block
content: ""
clear: both
}
ul,
li {
list-style: none
}
.nav>li {
float: left
margin: 0 10px
}
.nav>li ul {
display: none
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
//案例分析：导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件
//核心原理：当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏
var nav = document.querySelector('.nav')
var lis = nav.children
for (var i = 0 i < lis.length i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none'
}
}
</script>
原因：你点击左侧菜单，整个页面被刷新了，从而始终第一个被选中方法一：
点击左侧菜单的时候，顺便把参数带过去到后台，然后从后台返回，获取参数，你就知道是点击了哪个然后再进行你的第二种设置。
方法二：
利用jquery的ajax，无刷新跳转获取数据
