显示的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选择和只允许一个被选中

回答

相关问题