Question

我确定有一个简单的解决方案。我有两个与两个复选框相关联的标签，每个标签都显示相应的div。当我点击checkbox2并显示div2时，我必须隐藏div1，反之亦然。

＆＃13;

/* Default State */
.hombres, .mujers{
    display: none;
}
/* Toggled State */
input[type=checkbox]#hombre:checked ~ div.hombres {
    display:block;
    background-color: #f04e10;
}
input[type=checkbox]#mujer:checked ~ div.mujers {
    display:block;
    background-color: #f04e10;
}
input[type=checkbox]#hombre:checked ~ div.mujers {
    display: none;
}
input[type=checkbox]#mujer:checked ~ div.hombres {
    display: none;
}

＆＃13;

<label for="hombre">Hombre</label>
<input type="checkbox" id="hombre">
<label for="mujer">Mujer</label>
<input type="checkbox" id="mujer">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>

＆＃13;

有什么想法吗？

Answer 1

将复选框更改为具有相同名称的单选按钮，如下所示：
^jsfiddle.net

/* Default State */
.hombres, .mujers{
    display: none;
}
/* Toggled State */
input[type=radio]#hombre:checked ~ div.hombres {
    display:block;
    background-color: #f04e10;
}
input[type=radio]#mujer:checked ~ div.mujers {
    display:block;
    background-color: #f04e10;
}
input[type=radio]#hombre ~ div.mujers {
    display: none;
}
input[type=radio]#mujer ~ div.hombres {
    display: none;
}

<label for="hombre">Hombre</label>
<input type="radio" id="hombre" name="demo">
<label for="mujer">Mujer</label>
<input type="radio" id="mujer" name="demo">
<div class="hombres"><p>Hombre</p></div>
<div class="mujers"><p>Mujer</p></div>

复选框当我单击另一个复选框时隐藏一个div

1 个答案: