当点击一个按钮时变色，其他按钮恢复原来的颜色

最新推荐文章于 2024-08-11 00:31:29 发布

Chennile1

最新推荐文章于 2024-08-11 00:31:29 发布

阅读量1.3w

点赞数 2

本文链接：https://blog.csdn.net/chen_nian_chen/article/details/80848047

版权

<!DOCTYPE html>
<html>
<head>
<title>userInformation.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<script src="../js/jquery-1.9.1.min.js"></script>



<style type="text/css">
.information {
width: 100%;
height: 800px;
background-color: #e3e4e5;
}

.information .leftdiv {
height: 800px;
width: 230px;
float: left;
background-color: white;
margin-left: 10%;
}

.information .leftdiv div {
background-color: #f5f5f5;
width: 200px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
color: #666666;
text-align: center;
line-height: 50px;
}

.start {
cursor: pointer;
background: white;
}

.end {
cursor: pointer;
color: black;
background: #2eafbb;
}

.information .leftdiv div a {
text-decoration: none;
}
</style>

</head>

<body>

<div class="information">
<div class="leftdiv">
<div class="flag">
<a href="#">账户信息</a>
</div>
<div class="flag">
<a href="#">修改信息</a>
</div>
<div class="flag">
<a href="#">登录日志</a>
</div>
</div>
</div>
</body>
<script>
$(".leftdiv div").click(
function() {
$(".leftdiv div").eq($(this).index()).css('background', '#2eafbb').siblings().css('background', '#f5f5f5');
})
</script>
</html>