CODEWITHSUNDEEP
javascriptjquery
psychcoder
psychcoder

Reputation: 675

Toggle color of an <a href> in Javascript

I made a 2D square that toggles between "classes" to change color. 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. 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!

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>

Upvotes: 0

Views: 66

Answers (2)

Arfizur Rahman
Arfizur Rahman

Reputation: 394

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

Upvotes: 0

yaakov
yaakov

Reputation: 4665

Instead of targeting the :active state, add it as a class:

$("#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>

Upvotes: 2

Related Questions