单击div时在div上设置box-shadow

Question

我有3个div。我希望当我点击第一个div然后在它上面设置box-shadow时，当我点击第二个div然后在它上面设置box-shadow也会删除第一个div上的box-shadow。

这些是3个div

＆＃13;

＆＃13;

 /*----- General ----*/
 html { -webkit-font-smoothing: antialiased;
  }
 body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #1c1c1c;
    height: 100%;
    min-height: 100%;
 }

 h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    color: #1c1c1c;
    margin-top: 0
 }

 h1 {
    font-size: 2.813em;
 }

 h2 {
    font-size: 2.5em;
 }

 h3 {
    font-size: 2em;
 }

 h4 {
    font-size:  1.438em;
 }

 h5 {
    font-size: 1.25em;
 }

 h6 {
    font-size: 1.125em;
 }

 ul,
 ol {
   list-style: none;
   line-height: 1.85714286em;
 }

 p {
    font-family: 'Roboto';
    font-size: 0.938em;
    color: #889094;
 }

 .btn {
    display: inline-block;
    background-color: #50b1fc;
    text-align: center;
    cursor: pointer;
    color: #fff;
    border-radius: 38px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    z-index: 0;
    vertical-align: middle;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    text-shadow: none;
    padding: 10px 30px;
 }

 .btn:hover {
    color: white;
 }

 .btn2 {
    display: inline-block;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    color: #010d2f;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    z-index: 0;
    vertical-align: middle;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
    text-shadow: none;
    padding: 10px 30px;
 }

 .btn2:hover {
    color: #010d2f;
 }


 /* Jobs */

 .single_job {
    background-color: #fff;
    -webkit-box-shadow: 0 0 38px rgba(0,0,0,.08);
    -moz-box-shadow: 0 0 38px rgba(0,0,0,.08);
    box-shadow: 0 0 38px rgba(0,0,0,.08);
    padding: 35px 25px;
 }

 .single_job p {
    margin-bottom: 25px;
 }
 .single_job h5 {
    margin-top: 5px;
 }

＆＃13;

$(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"
    });
  });
});

＆＃13;

＆＃13;

＆＃13;

我在所有3个div上给出相同的类名。问题是当我点击div然后不是焦点。

Answer 1

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

在jquery中。

Answer 2

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

＆＃13;

＆＃13;

$(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"
    });
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

boxShadow中有一个大写字母，你的jQuery选择器中没有一个，这是问题吗？

Answer 4

这是因为你已经为所有三个div提供了相同的类名，所以没有办法区分它们，所以当你可以专注于一个然后专注于那个其他那个盒子阴影将无法正常工作 我的建议是  1.对每个div使用id，并在循环中使用getElementById(i);来使用元素并选择框阴影。我是循环的迭代计数 要么 2.使用具有相同类名的javascript querySelectorall()，它将返回带有元素的数组，并且位置会更改框阴影

Answer 5

您可以使用样式 [“boxShadow”] 或 style.boxShadow

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testDiv" onclick="myFunction();">this is my content..click here for applicate the box-shadow</div>
<script>
function myFunction(){
document.getElementById("testDiv").style["boxShadow"] = "0 0 5px #999999";
}

More About this

Link JsFiddle

Answer 6

你可以尝试这个技巧

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

div中的类名也是boxShadow而不是boxshadow

Answer 7

对于信息和好奇心:(不是关于javascript）

您可以使用tabindex attribute让元素捕获焦点（通过单击或制表符），然后使用CSS中的:focus选择器来更新样式。

＆＃13;

＆＃13;

[tabindex] {box-shadow:inset 0 1px 1px #dab6b6, 0 0 0px #da0707;transition:0.25s}
[tabindex]:focus {box-shadow:inset 0 1px 1px #dab6b6, 0 0 8px #da0707;}

＆＃13;

<div class="row">

  <div class="col-lg-4 col-md-6 boxShadow" tabindex="0">
    <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" tabindex="0">
    <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" tabindex="0">
    <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>

＆＃13;

＆＃13;

＆＃13;

另见https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Answer 8

只需循环遍历每个div并添加/删除带有box-shadow的类，基于点击哪个div，如下所示：

＆＃13;

＆＃13;

//get all boxShadow divs
const boxes = document.querySelectorAll('.boxShadow');

// convert them to an array
const boxesArray = Array.from(boxes);

//assign boxShadow to clicked div
function toggleShadow() {
    for(var i = 0; i < boxesArray.length; i++) {
       boxesArray[i].classList.remove('addShadow');
    }
    this.classList.add('addShadow');
}

//detect the div clicked
boxesArray.forEach( function(box) {
    box.addEventListener('click', toggleShadow);
});

＆＃13;

    
/* CSS */
.addShadow {
    box-shadow: 5px 10px #888888;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

N.B。用您自己的

替换box-shadow css属性

Answer 9

＆＃13;

＆＃13;

.shadow{
box-shadow: inset 0 1px 1px #dab6b6, 0 0 8px #da0707;
}

＆＃13;

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

＆＃13;

bucket-owner-full-control

＆＃13;

＆＃13;

＆＃13;