html css js导航点击菜单后自动改变背景颜色

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、然后就完成了。

等着！现在给你写

	
	
	
		ul,li{
			margin:0;
			padding: 0;
		}
		ul,li{
			list-style: none;
			float: left;
		}
		li{
			width:100px;
			height: 50px;
			border:1px solid red;
			text-align: center;
			line-height: 51px;
			background: #f00;
			margin-right: 1px;
			color:#fff;
			font-weight: bold;
		}
		.active{
			background: #fff;
			color: black;
		}
	
	
	
	$(function(){
		$('.index').click(function(){
			$('.index').addClass('active');
			$('.new').removeClass('active');
			$('.hot').removeClass('active');
			$('.about').removeClass('active');
			$('.contact').removeClass('active');
		});
		$('.new').click(function(){
			$('.new').addClass('active');
			$('.index').removeClass('active');
			$('.hot').removeClass('active');
			$('.about').removeClass('active');
			$('.contact').removeClass('active');
		});
		$('.hot').click(function(){
			$('.hot').addClass('active');
			$('.new').removeClass('active');
			$('.index').removeClass('active');
			$('.about').removeClass('active');
			$('.contact').removeClass('active');
		});
		$('.about').click(function(){
			$('.about').addClass('active');
			$('.new').removeClass('active');
			$('.hot').removeClass('active');
			$('.index').removeClass('active');
			$('.contact').removeClass('active');
		});
		$('.contact').click(function(){
			$('.contact').addClass('active');
			$('.new').removeClass('active');
			$('.hot').removeClass('active');
			$('.about').removeClass('active');
			$('.index').removeClass('active');
		});
	});
	


	

		首页
		新品上架
		畅销排行
		关于我们
		联系我们
	

我这个方法可能比较笨，希望你有更好的答案。

--css


--js


--html
菜单一
菜单二
菜单三
菜单四