<a href>在 Javascript 中</a>切换颜色

Question

I made a 2D square that toggles between "classes" to change color.我制作了一个 2D 方块，可以在“类”之间切换以改变颜色。 When it's clicked, it turns blue.当它被点击时，它变成蓝色。 When it's clicked again, it turns back to gray.再次单击时，它会变回灰色。 Code below!代码如下！

<!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>

Now I'm trying to replicate this toggle feature with a 3D square, but have not been successful.现在我试图用 3D 方块复制这个切换功能，但没有成功。 So when it's clicked, it should turn blue and stay blue until it's clicked again.所以当它被点击时，它应该变成蓝色并保持蓝色直到它再次被点击。 Then when clicked again, it should turn back to gray.然后再次单击时，它应该变回灰色。 (Just like in the 2D version.) Below is my current non-working code! （就像在 2D 版本中一样。）下面是我当前的非工作代码！

Thanks in advance for any advice!提前感谢您的任何建议！

<!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>

Answer 1

Instead of targeting the :active state, add it as a class:不是针对:active状态，而是将其添加为一个类：

 $("#b1").click(function() { $(this).children('a').toggleClass('active'); });

 .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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="experiment"> <div id="shape_container"> <div ontouchstart="" class="square" id="b1"><a href="#">b1</a></div> </div>

Answer 2

Change the改变

.square a:active{...}

to到

.square a.active{...}

Modify the click function as below修改点击功能如下

$("#b1").click(function() {
    // Toggle active class
    $("#b1 > a").toggleClass('active');
});

See the working example in Codepen请参阅Codepen 中的工作示例

<a href>在 Javascript 中</a>切换颜色

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-02-10 05:24:12

解决方案2
0 2020-02-10 05:45:20

<a href>在 Javascript 中</a>切换颜色

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-02-10 05:24:12

解决方案2 0 2020-02-10 05:45:20

解决方案1
2 已采纳 2020-02-10 05:24:12

解决方案2
0 2020-02-10 05:45:20