怎么点击一个div改变另一个div的样式,再点击变回来?
发布网友
发布时间：2022-04-23 09:57
共4个回答
热心网友
时间：2022-04-21 01:04
当点击a的时候判断b是否有on这个类 如果有移除 如果没有添加。基本代码如下，仅供参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.a{width: 50px;height: 50px;border: 1px solid red;position: relative;}
.b{width: 20px;height: 20px;background: skyblue;transition: all 0.5s;position: absolute;top: 50%;left: 50%;margin-top: -10px;margin-left: -10px;}
.on{transform: rotate(-45deg);}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
<script>
let oA = document.querySelector('.a');
let oB = document.querySelector('.b');
oA.onclick = ()=>{
if(oB.classList.contains('on')){
oB.classList.remove('on');
}else{
oB.classList.add('on');
}
}
</script>
</body>
</html>
热心网友
时间：2022-04-21 02:22
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 50px;
height: 50px;
background: cyan;
}
.child{
width: 5px;
height: 5px;
background: #aaffaa;
transform: rotate(-45deg);
}
.myChange{
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="parent" onclick="changeChild()">
<div class="child"></div>
</div>
<script>
let mySwitch =true;
function changeChild() {
let child_div = document.getElementsByClassName('child')[0];
if(mySwitch){
child_div.classList.add('myChange');
mySwitch=false;
}else{
child_div.classList.remove('myChange');
mySwitch=true;
}
}
</script>
</body>
</html>
热心网友
时间：2022-04-21 03:56
热心网友
时间：2022-04-21 05:48
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
.d1,.d2{
display: inline-block;
width: 100px;
height: 30px;
background: black;
margin-left: 100px;
color: white;
text-align: center;
}
.at{
background: orange;
}
</style>
</head>
<body>
<div class="d1">A</div>
<div class="d2 at">B</div>
</body>
<script>
$(".d1").click(function(){
$(".d2").toggleClass("at");
})
</script>
</html>
有帮助别忘记采纳哈，码字不易
