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

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

布局

1. 在div之前设置每个无线电(本演示中的字段集)

2. 在每个电台:

   • 分配一个唯一的 #id
   • 分配相同的 [name]

3. 接下来使用属性制作2个标签,[for]并将每个属性的值设置#id为无线电的值.[for]标签的属性与收音机同步,#id以便在点击标签时收音机也是如此.

4. 将这些标签放在页面上任意位置.

5. 为了方便起见,请指定一个将类似标记组合在一起的类.

样式

1. 通过设置隐藏每个收音机后面的收音机和div display:none

2. 制定以下规则集(记住布局的第5步)

    .radio:checked + .classOfDiv { display:block }
   

   浏览器会向后读取CSS规则集:任何具有className的.classOfDiv元素都有一个兄弟元素放在之前(在代码中更像是在上面或左边)它和兄弟姐妹(哥哥？)的className是.radio 并且恰好也要检查...将该.classOfDiv display属性设置为block.

   它+被称为Adjacent Sibling Combinator,它是此规则集的关键.有关详细信息,请参阅演示后的参考.

演示

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

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

参考

相邻的兄弟姐妹组合

对于属性