单击按钮时Div显示框阴影

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

您将单击处理程序添加到button元素，因此单击它时，事件目标将是按钮，这就是为什么按钮被高亮显示而不是单击时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 个解决方案

解决方案1
1 2018-07-18 20:38:22

解决方案2
1 已采纳 2018-07-18 20:41:39

解决方案3
-1 2018-07-18 20:43:37

单击按钮时Div显示框阴影

问题描述

3 个解决方案

解决方案1 1 2018-07-18 20:38:22

解决方案2 1 已采纳 2018-07-18 20:41:39

解决方案3 -1 2018-07-18 20:43:37

解决方案1
1 2018-07-18 20:38:22

解决方案2
1 已采纳 2018-07-18 20:41:39

解决方案3
-1 2018-07-18 20:43:37