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（对应于所选颜色）

在下面的代码段中，以下是正在进行的操作：

每当点击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; }。

＆＃13;

<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>

＆＃13;

div

＆＃13;

只需使用一个div元素（而不是4个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; }元素），然后根据所选的单选按钮更改其背景颜色，即可实现同样的效果。以下是一个示例。

＆＃13;

<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>

＆＃13;

       ./spark-shell --master spark://localhost:7077 bin/spark-shell

＆＃13;

Answer 2

您可以使用css3的 + 选择器来显示div。使用+，它会选择<div>标记后立即放置的所有<input>标记。

Html ：

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

Css ：

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

input[name="clr"]:checked + div {
  display: block;
}

以下是fiddle。

div {
  position:absolute;
  background-color:red;
  height:150px;
  width:150px;
  margin:10px;
  display: none;
}
.first-div{background-color:black;}
.second-div{background-color:blue;}
.third-div{background-color:green;}
.forth-div{background-color:yellow;}

input[name="clr"]:checked + div {
  display: block;
}

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

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

2 个答案: