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

很简单的需求，有一个导航菜单，默认菜单背景色为红色，如图所示点击某个菜单，比如点击菜单二，它的背景色变为白色，而其他菜单一三四颜色不变；再点击菜单三，他的背景颜色变为白色... 很简单的需求，有一个导航菜单，默认菜单背景色为红色，如图所示
点击某个菜单，比如点击菜单二，它的背景色变为白色，而其他菜单一三四颜色不变；

再点击菜单三，他的背景颜色变为白色，其他菜单一二四颜色不变；

本人初学css+js，希望能给出css+js代码，谢谢！展开





 我来答

3个回答

#热议# 应届生在签三方时要注意什么？

百度网友a2546cf

高能答主

2020-01-21 · 有什么不懂的尽管问我

知道小有建树答主

回答量：1610

采纳率：100%

帮助的人：38.2万

我也去答题访问个人页

关注

展开全部

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

已赞过 已踩过<

评论收起

有范er的小青年
推荐于2016-10-18 · TA获得超过866个赞

知道小有建树答主

回答量：806

采纳率：20%

帮助的人：253万

我也去答题访问个人页

关注

展开全部

等着！现在给你写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		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;
		}
	</style>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript">
	$(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');
		});
	});
	</script>
</head>
<body>
	<ul>
		<li class="index">首页</li>
		<li class="new">新品上架</li>
		<li class="hot">畅销排行</li>
		<li class="about">关于我们</li>
		<li class="contact">联系我们</li>
	</ul>
</body>
</html>

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

追问

好的

本回答被提问者采纳

已赞过 已踩过<

评论收起

心光回现
2015-12-02 · 超过48用户采纳过TA的回答

知道小有建树答主

回答量：75

采纳率：0%

帮助的人：58.2万

我也去答题访问个人页

关注

展开全部

--css
<style type="text/css">
.redCls{background-color:#ff0000;width:200px;height:50px;line-height:50px;cursor:pointer;border:solid 1px #000000;}
.curCls{background-color:#ffffff;width:200px;height:50px;line-height:50px;cursor:pointer;border:solid 1px #000000;}
</style>

--js
<script type='text/javascript'>
function selectMenu(obj) {
var eles = document.getElementsByTagName("span");
for (var i = 0; i < eles.length; i++) {
var e = eles[i];
var clsAttr = e.getAttribute["group"];
if (clsAttr = "aMenu") {
e.setAttribute("class", "redCls");
}
obj.setAttribute("class","curCls");
}
}
</script>

--html
<span class="redCls" group="aMenu" href="javascript:void(0)" onclick="selectMenu(this)">菜单一</span>
<span class="curCls" group="aMenu" href="javascript:void(0)" onclick="selectMenu(this)">菜单二</span>
<span class="redCls" group="aMenu" href="javascript:void(0)" onclick="selectMenu(this)">菜单三</span>
<span class="redCls" group="aMenu" href="javascript:void(0)" onclick="selectMenu(this)">菜单四</span>

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：