javascript - 单击它时在 div 上设置一个 box-shadow

Question

我有 3 个 div。我希望当我单击第一个 div 然后在其上设置 box-shadow 并且当我单击第二个 div 然后在其上设置 box-shadow 时也删除第一个 div 上的 box-shadow。

这些是 3 个 div

$(document).ready(function() {
  $(".boxshadow").on('focus', function() {
    $(this).css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
    });
  });
  $(".boxshadow").on('blur', function() {
    $(this).css({
      "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Bravo Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-warning ">
          <i class="now-ui-icons media-1_button-power"></i>
        </div>
        <h3 class="card-title" style="color: #333;">10$</h3>
        <ul>
          <li style="color: #888;">Complete documentation</li>
          <li style="color: #888;">Working materials in Sketch</li>
        </ul>

      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing">
      <h6 class="card-category"> Alpha Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-primary ">
          <i class="now-ui-icons objects_diamond"></i>
        </div>
        <h3 class="card-title">69$</h3>
        <ul>
          <li>Working materials in EPS</li>
          <li>6 months access to the library</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 boxShadow">
    <div class="card card-pricing card-plain">
      <h6 class="card-category"> Charlie Pack</h6>
      <div class="card-body">
        <div class="card-icon icon-success ">
          <i class="now-ui-icons media-2_sound-wave"></i>
        </div>
        <h3 class="card-title" style="color: #333;">69$</h3>
        <ul>
          <li style="color: #888;">Working materials in PSD</li>
          <li style="color: #888;">1 year access to the library</li>
        </ul>
      </div>
    </div>
  </div>

</div>

我在所有 3 个 div 上都给出了相同的类名。问题是当我点击 div 时，它就不是焦点。

标签： javascriptjqueryhtmlcss

Answer 1

$('.box-shadow').click(function () {
    $(this).css('box-shadow','0 2px 3px rgba(0,0,0,0.3)');
});

在jQuery中。