顯示的onclick選擇和只允許一個被選中

-2

在我的網頁的底部，我有4個格徘徊時改變顏色：顯示的onclick選擇和只允許一個被選中

<div class="icon"> 
    <img id="AboutUs" src="Image1.jpg" width="150px" height="150px" /> 
    <p> About Us </p> 
</div> 
<div class="icon"> 
    <img id="Something1" src="Image2.jpg" width="150px" height="150px" /> 
    <p> Something </p> 
</div> 
<div class="icon"> 
    <img id="Something2" src="Image3.jpg" width="150px" height="150px" /> 
    <p> Something </p> 
</div> 
<div class="icon"> 
    <img id="Something3" src="Image4.jpg" width="150px" height="150px" /> 
    <p> Something </p> 
</div>

CSS

.icon:hover 
{background-color:grey;}

從這裏，我想能夠點擊其中一個div使背景變爲較暗的陰影，同時也只允許一次選擇一個div。我不確定該從哪裏出發，但任何幫助將不勝感激。提前謝謝你！

來源

2016-12-05 user3044521

你想通過HTML表單或JavaScript來解決呢？ –

你應該看看Javascript，使用if語句並設置DOM背景非常簡單。發佈更多，如果你需要幫助！如果這是爲了原型目的，有方法可以使用css來顯示它：目標 – Benneb10

HTML，CSS或JavaScript都很好。但我從來沒有學過JQuery – user3044521

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="icon"> 
 
    <img id="AboutUs" src="Image1.jpg" width="150px" height="150px" /> 
 
    <p> About Us </p> 
 
</div> 
 
<div class="icon"> 
 
    <img id="Something1" src="Image2.jpg" width="150px" height="150px" /> 
 
    <p> Something </p> 
 
</div> 
 
<div class="icon"> 
 
    <img id="Something2" src="Image3.jpg" width="150px" height="150px" /> 
 
    <p> Something </p> 
 
</div> 
 
<div class="icon"> 
 
    <img id="Something3" src="Image4.jpg" width="150px" height="150px" /> 
 
    <p> Something </p> 
 
</div> 
 

 
<style> 
 
.icon:hover 
 
{background-color:grey;} 
 
</style> 
 

 
<script> 
 
var clicked = false; 
 
    $('.icon').click(function(){ 
 
    if(clicked==false){ 
 
     
 
     clicked = true; 
 
     $(this).css('background-color', 'black'); 
 
    } 
 
    }) 
 
    
 
</script>

來源

2016-12-05 21:59:53

顯示的onclick選擇和只允許一個被選中

回答

相關問題