通过单击单选按钮更改CSS中的几个div颜色

Question

是否可以使用CSS来实现与以下在JavaScript中完成的示例相同的输出.我想只在CSS中执行此操作.

HTML

<div class="first-div" id="black"></div>
<div class="second-div" id="blue" ></div>
<div class="third-div" id="green"></div>
<div class="forth-div" id="yellow"></div>
<br>
<input type="radio" value="Black" name="clr" onClick="f(this.value)">Black

<input type="radio" value="Blue" name="clr" onClick="f(this.value)" >Blue

<input type="radio"value="Green" name="clr" onClick="f(this.value)" >Green

<input type="radio"value="Yellow" name="clr" onClick="f(this.value)">Yellow

CSS

div{
  position:absolute;
  background-color:red;
  height:150px;
  width:150px;
  margin:10px;
}
.first-div{background-color:black;}
.second-div{background-color:blue;}
.third-div{background-color:green;}
.forth-div{background-color:yellow;}

JavaScript 我想在没有JavaScript代码的情况下执行相同的功能.只是应用CSS,黑客单选按钮强制它改变点击div的颜色

function f(IncValue)
    {
        if(IncValue=="Black")
        {
            document.getElementById('black').style.visibility="visible";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";

        }
        else if(IncValue=="Blue")
        {
            document.getElementById('blue').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Green")
        {
            document.getElementById('green').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('yellow').style.visibility="hidden";
        }
        else if(IncValue=="Yellow")
        {
            document.getElementById('yellow').style.visibility="visible";
            document.getElementById('black').style.visibility="hidden";
            document.getElementById('blue').style.visibility="hidden";
            document.getElementById('green').style.visibility="hidden";
        }


    }

Answer 1

通过将所有输入按钮移动到divDOM中的元素之前,然后使用通用兄弟选择器,我们可以div单独隐藏/显示所需的(对应于所选颜色).

在下面的代码片段中,以下是正在执行的操作:

• 每当点击一个input(无线电)时name="clr",所有div与兄弟姐妹相关的元素input都class='colored-div被隐藏.我已经从提供的原始片段更改了类名,只是为了确保只div隐藏这些元素.否则我们必须编写一组选择器或使用通用div选择器,这会在其他地方引起问题(也就是说,div页面中的其他内容也会被隐藏).
• 基于input已选择的(无线电),仅将div与所选颜色对应的设置为visibility: visible.

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
#black {
  background-color: black;
}
#blue {
  background-color: blue;
}
#green {
  background-color: green;
}
#yellow {
  background-color: yellow;
}
input[name="clr"]:checked ~ .colored-div {
  visibility: hidden;
}
input[value="Black"]:checked ~ #black {
  visibility: visible;
}
input[value="Blue"]:checked ~ #blue {
  visibility: visible;
}
input[value="Green"]:checked ~ #green {
  visibility: visible;
}
input[value="Yellow"]:checked ~ #yellow {
  visibility: visible;
}

<input type="radio" value="Black" name="clr">Black
<input type="radio" value="Blue" name="clr">Blue
<input type="radio" value="Green" name="clr">Green
<input type="radio" value="Yellow" name="clr">Yellow
<div class="colored-div" id="black"></div>
<div class="colored-div" id="blue"></div>
<div class="colored-div" id="green"></div>
<div class="colored-div" id="yellow"></div>

通过仅使用单个div元素(而不是4个div元素)然后根据所选单选按钮更改其背景颜色,可以实现相同的目的.以下是一个示例.

div {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 10px;
}
input[value="Black"]:checked ~ .colored-div {
  background-color: black;
}
input[value="Blue"]:checked ~ .colored-div {
  background-color: blue;
}
input[value="Green"]:checked ~ .colored-div {
  background-color: green;
}
input[value="Yellow"]:checked ~ .colored-div {
  background-color: yellow;
}

<input type="radio" value="Black" name="clr">Black
<input type="radio" value="Blue" name="clr">Blue
<input type="radio" value="Green" name="clr">Green
<input type="radio" value="Yellow" name="clr">Yellow
<div class="colored-div"></div>