Question

我希望单击此按钮，然后突出显示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>

Answer 1

您可以为此使用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>

Answer 2

您要在按钮元素上添加点击处理程序，因此单击它时，事件目标将是按钮，这就是为什么按钮被高亮显示而不是单击时div的原因。

与其尝试从事件中获取div，还可以通过在脚本中通过ID进行选择来创建对该div的引用。在下面的示例中，它称为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>

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

单击按钮时Div显示框阴影

3 个答案: