Question

在这种情况下， DIV＆＃39> 作为类别按钮，用户可以一次选择多个类别，当他们选择一个类别时，背景颜色会更改为用户知道当前选择了哪些类别。

因此， DIV＆＃39> 在未激活时是透明的，然后当用户按下其中一些时，它们会变成一些颜色，告诉访问者他们当前处于活动状态。

对不起，如果我愚蠢地解释，希望得到你们的帮助！

Answer 1

＆＃13;

$(function(){
	$('.cat').click(function(){
		$(this).addClass('selected');
	});
});

＆＃13;

.cat {
	width: 200px;
	height: 200px;
	display: inline-block;
	background-color: #a3a3a3;
	margin-right: 20px;
    margin-bottom: 20px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	line-height: 200px;
	cursor: pointer;
}

.selected {
	opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cat1" class="cat">cat 1</div>
<div id="cat2" class="cat">cat 2</div>
<div id="cat3" class="cat">cat 3</div>

＆＃13;

Answer 2

对你来说应该很容易！无需使用任何JavaScript。

<强> CSS

<style type="text/css">
     label.category > input{
      visibility: hidden;
      position: absolute;
    }
    label.category > input + div{
    width:50px;
    height:50px;
    cursor:pointer;
    float:left;
    background-color:transparent;
    border:#999 solid 1px;
    margin-left:10px;
    }
    label.category > input:checked + div{
      background-color: #FCF;
    }
</style>

<强> HTML

<form method="post" action="">
<label class="category">
          <input type="checkbox" name="category" value="item1"/>
          <div>
          Item 1
          </div>
        </label>
        <label class="category">
          <input type="checkbox" name="category" value="item2"/>
          <div>
          Item 2
          </div>
        </label>
        <label class="category">
          <input type="checkbox" name="category" value="item3"/>
          <div>
          Item 3
          </div>
        </label>
</form>

选择div后改变背景颜色？

2 个答案: