布局

Question

我正在寻找一个只有CSS的答案，我可以用Javascript / Jquery解决，但我试图解决没有问题。

简而言之，我必须使用单选按钮，如果选择了第一个，我希望显示一个div，如果选择第二个，我希望显示第二个div。

我创建了一个带有myProblem简化版本的jsfiddle https://jsfiddle.net/lukehammer/x7yw432d/5/我无法在JS小提琴或我的代码中使用它。

    <label>
<input id="Type1" name="UserType" type="radio" value="Contractor">
            Contractor
</label>

<label>
<input id="Type2" name="UserType" type="radio" value="Managment">
             Managment
</label>

<div class = "hideAtStart" id = "contractorDisplay">
  Show me I'm a contractor.
</div>

<div class = "hideAtStart" id = "ManagerDisplay">
  Show me I'm a managerr.
</div>

CSS

.hideAtStart {
display: none;
}

#Type1:checked ~ #contractorDisplay{
  display : block; 
}

#Type2:checked ~ #ManagerDisplay{
  display : block; 
}

问题

如何在按下单选按钮时显示div？

**奖励积分**

BounS积分，如果过渡可以淡入/淡出。

Answer 1

布局

在div之前设置每个无线电（本演示中的字段集）
在每个电台上：
- 指定唯一的#id
- 指定相同的[name]
接下来使用属性[for]制作2个标签，并将每个属性的值设置为收音机的#id。标签的[for]属性会与具有相同#id的广播同步，以便在点击标签时收音机也是如此。
将这些标签放在页面上的任意位置。
为了方便起见，请指定一个将类似标签组合在一起的类。

风格

通过设置display:none
制作以下规则集（记住布局的第5步）
```
 .radio:checked + .classOfDiv { display:block }
```
浏览器会向后读取CSS规则集：任何className为.classOfDiv的元素都有一个兄弟元素放在它之前（在代码中它更像是在上面或者左边）它和兄弟姐妹（哥哥？）的className是碰巧也会检查.radio 和 ...将.classOfDiv display属性设置为block。

+被称为相邻兄弟姐妹组合，这是此规则集的关键。有关详细信息，请参阅演示后的参考文献。

演示

＆＃13;

.rad,
.set {
  display: none;
  opacity: 0;
}

.rad:checked+.set {
  display: block;
  opacity: 1;
}

.btn {
  display: inline-block;
  border: 2px inset grey;
  border-radius: 6px;
  padding: 2px 3px;
  cursor: pointer
}

.btn:hover {
  border-color: tomato;
  color: tomato;
  transition: .75s ease;
}

legend {
  font-size: 1.5em
}

＆＃13;

<form id='main'>
  <fieldset>
    <legend>SWITCH</legend>
    <label for='rad0' class='btn'>OPEN SET 0</label>
    <label for='rad1' class='btn'>OPEN SET 1</label>
  </fieldset>

  <input id='rad0' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 0</legend>
  </fieldset>

  <input id='rad1' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 1</legend>
  </fieldset>
</form>

＆＃13;

参考

Adjacent Sibling Combinator

for Attribute

隐藏/显示基于单选按钮的Div（仅限CSS）

1 个答案:

布局

风格

演示

参考