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/

UPDATE如果你想獲得的亮點消失，你必須寫檢查，如果你點擊了身體，但外面的項目的功能。

$("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/

Answer 2

操作HTML標籤和你說突出元素的z-index的（高）的不透明性和Z指數。

而且這裏是唯一的代碼，我編輯相比，你的：

$(function() { 
$('.section').click(function() { 
$('.section2').removeClass('section2'); 
$(this).addClass('section2'); 
$("html").css({"z-index" : "200", "opacity": "0.7","background": "black"}); 
}); 
}); 


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

Answer 3

我已經更新您的fiddle。請檢查一下。

您需要添加的條件是檢查'.section'類是否具有類'.section2'。

$(function() { 
    $('.section').click(function() { 
    $('.section2').removeClass('section2'); 
    $(this).addClass('section2'); 
    if ($('.section').hasClass('section2')) { 
     $('body').addClass('darkBg'); 
     $('.section2').removeClass('section2'); 
     $(this).addClass('section2');   
     console.log('aaa'); 
    } else { 
     $('body').removeClass('darkBg'); 
    } 
    }); 
}); 

Answer 4

如果你只是想減少其他項目的不透明度，你可以只選擇所有這些，有沒有.section2類，並添加一個.darken類代替。

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

.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; 
 
    transition: opacity .5s, background-color .25s; 
 
} 
 

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

 
.darken { 
 
    opacity: 0.1; 
 
}

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