javascript - Html 页面中选定的 div 突出显示

Question

当我单击测试 1、测试 2 或测试 3 时，单击的 div 将从其他两个 div 突出显示。我想做的是，当 div 突出显示时，页面的其他区域必须变暗(不透明度降低)然后单击 div 仅从整页突出显示。 请有人帮我完成这件事..

工作样本在这里

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');
  });
});

.container {
  width: 400px;
  margin: 0 auto;
}

.section {
  height: 50px;
  margin: 10px;
  background-color: red;
  color: white;
  box-shadow: 3px 3px 15px rgba(102, 102, 102, 0);
  border: 1px solid rgba(0, 0, 0, 0);
  opacity: .3;
}

.section2 {
  height: 50px;
  background-color: green;
  color: white;
  margin: 10px;
  opacity: 1 !important;
  box-shadow: 3px 3px 15px #666;
  border: 1px solid #7d7d7d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>This is header of the sample </header>
  <br/>
  <div class="div-list">
    <div class="section">
      <h2>Test 1</h2>
    </div>
    <div class="section">
      <h2>Test 2</h2>
    </div>
    <div class="section">
      <h2>Test 3</h2>
    </div>
  </div>
  <br/>
  <footer>
    <h3>This is footer of the sample </h3>
  </footer>
</div>

Answer 1

当您的一个元素被点击时，您可以在整个容器或页面上设置黑色背景并设置正确的不透明度。

$(function() {
  $('.section').click(function() {
    $('.section2').removeClass('section2');
    $(this).addClass('section2');
    $(".container").css({"background-color": "rgba(0,0,0,0.7)"});
  });
});

已更新 JsFiddle:https://jsfiddle.net/g1jqyk8x/5/

更新如果你想让突出显示消失，你必须编写一个函数来检查你是否点击了正文但在你的元素之外。

$("body").click(function(e) {
        if (e.target.class == "div-list" || $(e.target).parents(".div-list").size()) 
        {
             //This triggers if you click on them
        }
        else
        {     
             //This triggers if you click outside of them
           $(".container").css({"background-color": "rgba(0,0,0,0)"});
           $('.section2').removeClass('section2');
        }
  });

JsFiddle:https://jsfiddle.net/g1jqyk8x/6/