html css js导航点击菜单后自动改变背景颜色
很简单的需求，有一个导航菜单，默认菜单背景色为红色，如图所示点击某个菜单，比如点击菜单二，它的背景色变为白色，而其他菜单一三四颜色不变；再点击菜单三，他的背景颜色变为白色...
很简单的需求，有一个导航菜单，默认菜单背景色为红色，如图所示
点击某个菜单，比如点击菜单二，它的背景色变为白色，而其他菜单一三四颜色不变；
再点击菜单三，他的背景颜色变为白色，其他菜单一二四颜色不变；
本人初学css+js，希望能给出css+js代码，谢谢！ 展开
点击某个菜单，比如点击菜单二，它的背景色变为白色，而其他菜单一三四颜色不变；
再点击菜单三，他的背景颜色变为白色，其他菜单一二四颜色不变；
本人初学css+js，希望能给出css+js代码，谢谢！ 展开
3个回答
展开全部
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、然后就完成了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
等着！现在给你写
<!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>
我这个方法可能比较笨，希望你有更好的答案。
追问
好的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
--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>
<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）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
