切换一个<；a href>；在Javascript中_Javascript_Jquery

切换一个<；a href>；在Javascript中

javascript jquery

切换一个<；a href>；在Javascript中,javascript,jquery,Javascript,Jquery,我制作了一个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> <styl

我制作了一个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>


.广场{
显示：内联块；
边界半径：4px；
高度：100px；
宽度：100px；
文本对齐：居中；
背景#D2D7D3；
}
蓝先生{
背景#446CB3；
}
$（“#b1”）。单击（函数（）{
$（'#b1'）。toggleClass（'blue'）；
});

现在我正试图用一个3D正方形来复制这个切换功能，但没有成功。因此，当它被点击时，它应该变成蓝色并保持蓝色，直到再次点击。然后，当再次单击时，它应返回灰色。（就像在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>


.广场{
显示：内联块；
边界半径：4px；
高度：100px；
宽度：100px；
文本对齐：居中；
}
.广场a{
颜色：#B6BB7；
字体系列：Helvetica，无衬线；
字体大小：粗体；
字体大小：36px；
文本对齐：居中；
文字装饰：无；
背景色：#B6BB7；
显示：块；
位置：相对位置；
填充：20px 40px；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
过滤器：dropshadow（颜色=#000，offx=0px，offy=1px）；
-网络工具包盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-moz盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
盒影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.方a：激活{
顶部：10px；
颜色：#446CB3；
背景色：#446CB3；
-网络工具包盒阴影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
-莫兹盒阴影：插图0 1px0#B6D5FF，插图0-3px0#003D7E；
盒影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
}
$（“#b1”）。单击（函数（）{
//还没有弄明白如何在这里编写正确的切换代码！
});

将其作为类添加，而不是针对

：active

状态：

$（“#b1”）。单击（函数（）{
$（this）.children（'a'）.toggleClass（'active'）；
});
.square{
显示：内联块；
边界半径：4px；
高度：100px；
宽度：100px；
文本对齐：居中；
}
.广场a{
颜色：#B6BB7；
字体系列：Helvetica，无衬线；
字体大小：粗体；
字体大小：36px；
文本对齐：居中；
文字装饰：无；
背景色：#B6BB7；
显示：块；
位置：相对位置；
填充：20px 40px；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
过滤器：dropshadow（颜色=#000，offx=0px，offy=1px）；
-网络工具包盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-moz盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
盒影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.方a.激活{
顶部：10px；
颜色：#446CB3；
背景色：#446CB3；
-网络工具包盒阴影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
-莫兹盒阴影：插图0 1px0#B6D5FF，插图0-3px0#003D7E；
盒影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
}
将其作为类添加，而不是针对：active
状态：

$（“#b1”）。单击（函数（）{
$（this）.children（'a'）.toggleClass（'active'）；
});
.square{
显示：内联块；
边界半径：4px；
高度：100px；
宽度：100px；
文本对齐：居中；
}
.广场a{
颜色：#B6BB7；
字体系列：Helvetica，无衬线；
字体大小：粗体；
字体大小：36px；
文本对齐：居中；
文字装饰：无；
背景色：#B6BB7；
显示：块；
位置：相对位置；
填充：20px 40px；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
过滤器：dropshadow（颜色=#000，offx=0px，offy=1px）；
-网络工具包盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-moz盒阴影：插入0 1px 0#D2D7D3，0 10px 0#50551；
盒影：插入0 1px 0#D2D7D3，0 10px 0#50551；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.方a.激活{
顶部：10px；
颜色：#446CB3；
背景色：#446CB3；
-网络工具包盒阴影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
-莫兹盒阴影：插图0 1px0#B6D5FF，插图0-3px0#003D7E；
盒影：插图0 1px 0#B6D5FF，插图0-3px 0#003D7E；
}

更改
.square a:active{...}

到
修改单击功能，如下所示
$("#b1").click(function() {
    // Toggle active class
    $("#b1 > a").toggleClass('active');
});

请参见
中的工作示例更改
.square a:active{...}

到
修改单击功能，如下所示
$("#b1").click(function() {
    // Toggle active class
    $("#b1 > a").toggleClass('active');
});

请参见中的工作示例