javascript - 单击它时在 div 上设置一个框阴影

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 时没有焦点。

Answer 1

div 中发生的任何事件，首先清除所有边框，然后添加到特定的上。您的 JQuery 选择器也是错误的 boxshodow 或 boxShodow。

$(document).ready(function() {
  $(".boxShadow").on('click', function() {
    $(".boxShadow").each(function() {
      $(this).css({
        "box-shadow": "none"
      });
    })
    $(this).css({
      "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #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>