Я сделал 2D квадрат, который переключается между "классами", чтобы изменить цвет. Когда он нажал, он становится синим. При повторном щелчке он снова становится серым. Код ниже!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.square {
display: inline-block;
border-radius: 4px;
height: 100px;
width: 100px;
text-align: center;
background: #D2D7D3;
}
.blue {
background: #446CB3;
}
</style>
</head>
<body>
<div class="square" id="b1"></div>
<script type="text/javascript">
<!-- changes square color -->
$("#b1").click(function() {
$('#b1').toggleClass('blue');
});
</script>
</body>
</html>
Теперь я пытаюсь воспроизвести эту функцию переключения с трехмерным квадратом, но безуспешно. Поэтому, когда он щелкает, он должен становиться синим и оставаться синим , пока он не щелкнет снова. Затем при повторном нажатии он должен снова стать серым. (Так же, как в 2D-версии.) Ниже мой текущий нерабочий код!
Заранее спасибо за любые советы!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.square {
display: inline-block;
border-radius: 4px;
height: 100px;
width: 100px;
text-align: center;
}
.square a {
color: #B6BBB7;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
text-align: center;
text-decoration: none;
background-color: #B6BBB7;
display: block;
position: relative;
padding: 20px 40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
filter: dropshadow(color=#000, offx=0px, offy=1px);
-webkit-box-shadow: inset 0 1px 0 #D2D7D3, 0 10px 0 #505551;
-moz-box-shadow: inset 0 1px 0 #D2D7D3, 0 10px 0 #505551;
box-shadow: inset 0 1px 0 #D2D7D3, 0 10px 0 #505551;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.square a:active {
top: 10px;
color: #446CB3;
background-color: #446CB3;
-webkit-box-shadow: inset 0 1px 0 #B6D5FF, inset 0 -3px 0 #003D7E;
-moz-box-shadow: inset 0 1px 0 #B6D5FF, inset 0 -3pxpx 0 #003D7E;
box-shadow: inset 0 1px 0 #B6D5FF, inset 0 -3px 0 #003D7E;
}
</style>
</head>
<body onload="pageLoad();">
<div id="experiment">
<div id="shape_container">
<div ontouchstart="" class="square" id="b1"><a href="#">b1</a></div>
</div>
<script type="text/javascript">
$("#b1").click(function() {
// haven't figured out how to write correct toggle code here!
});
</script>
</body>
</html>