javascript - 通过单击单选按钮更改 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

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

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

• 每当单击具有 name="clr" 的 input( radio )时，所有 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>