html css js导航点击菜单后自动改变背景颜色
发布网友
发布时间：2022-04-06 12:41
共3个回答
热心网友
时间：2022-04-06 14:11
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、然后就完成了。
热心网友
时间：2022-04-06 15:29
等着！现在给你写
<!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>
我这个方法可能比较笨，希望你有更好的答案。
热心网友
时间：2022-04-06 17:03
<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>
