单击按钮时显示框阴影的 Div答案

【问题标题】：Div to show box shadow when button is clicked单击按钮时显示框阴影的 Div
【发布时间】：2018-07-18 20:36:06
【问题描述】：

我希望单击此按钮，然后突出显示 div 橙色.. 到目前为止，我只能在单击时突出显示按钮...不幸的是，div 突出显示按钮单击是否是完成与否.. 请不要使用 jquery。

   var addShadow = function(e) {
     e = e || window.event;
     e.preventDefault();
     var el = e.target || e.srcElement;
     el.className = 'highlight';
     setTimeout(function() {
       removeShadow(el);
     }, 300);
   };

   var removeShadow = function(el) {
     el.className = 'normal';
   };

.normal{
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
}
.highlight{
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
 }

<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>

<div class="highlight">Want it to highlight orange here when button is clicked.</div>

【问题讨论】：

标签： javascript html css button onclick

【解决方案1】：

您将单击处理程序添加到按钮元素，因此当您单击它时，事件目标将成为按钮，这就是为什么按钮会突出显示而不是单击时的 div。

无需尝试从事件中获取 div，您只需在脚本中通过其 id 选择它来创建对它的引用。在下面的示例中，它被称为divToHighlight。

var divToHighlight = document.getElementById('my-div');

var addShadow = function(e) {
  e = e || window.event;
  e.preventDefault();
  divToHighlight.className = 'highlight';
  setTimeout(function() {
    removeShadow(divToHighlight);
  }, 300);
};

var removeShadow = function(el) {
  el.className = 'normal';
};

.normal {
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width: 400px;
}

.highlight {
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width: 400px;
}

<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>

<div class="normal" id="my-div">Want it to highlight orange here when button is clicked.</div>

【讨论】：

这太完美了！谢谢！我没想过给它一个 ID。

【解决方案2】：

您可以为此使用 CSS 和 :active 状态：

.normal{
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
}


.normal:active + .normal{
  box-shadow: inset 0 0 20px 0 orange;
  border: 1px solid grey;
  padding: 5px 7px;
  display: inline-block;
  margin: 5px;
  width:400px;
 }

<button class="normal" >
Click here to highlight div.</button>

<div class="normal">Want it to highlight orange here when button is clicked.</div>

【讨论】：

点击按钮时，我希望 DIV 突出显示橙色。这个答案只突出显示按钮。这是我已经遇到的问题。
使用 CSS 的好方法。谢谢！

【解决方案3】：

试试这个代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
    <style>
        .normal {
            border: 1px solid grey;
            padding: 5px 7px;
            display: inline-block;
            margin: 5px;
            width: 400px;
        }

        .highlight {
            box-shadow: inset 0 0 20px 0 orange;
            border: 1px solid grey;
            padding: 5px 7px;
            display: inline-block;
            margin: 5px;
            width: 400px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12 normal" id="results">
                My div
            </div>
            <button class="btn btn-primary" id="switchbtn">Click me</button>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script>
        // clicking the button begins here
        $('#switchbtn').click(function() {
            // lets get the div we're targeting
            var mydiv = $('#results');
            // lets check if its highlighted or not
            if (mydiv.hasClass('normal') == true) {
                // if the div is in its normal state, lets highlight it
                $(mydiv).removeClass('normal');
                $(mydiv).addClass('highlight');
            } else {
                // if the div is highlighted, let's normalize it
                $(mydiv).removeClass('highlight');
                $(mydiv).addClass('normal');
            }
        });
    </script>
</body>

</html>

【讨论】：

请不要使用 jquery。