展开全部
思路，定义一个类on 里面属性是transform:rotete(-45deg);
当点击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>
当点击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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个我也看不懂的啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<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>
有帮助别忘记采纳哈，码字不易
<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>
有帮助别忘记采纳哈，码字不易
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
