代码之家 › 专栏 › 技术社区 › Luke Hammer

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

css html

Luke Hammer · 技术社区 · 8 年前

我正在寻找一个仅限于CSS的答案,我可以用javascript/jquery来解决,但我尝试在没有的情况下解决。

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

我用我的问题的简化版本创建了一个jspodle 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?

**奖励积分**

如果过渡可以淡入/淡出,则边界点。

1 回复 | 直到 8 年前

zer00ne 8 年前

- 指定一个唯一的 #id
- [name]
下一步使用属性生成2个标签 [for] 标签的属性与收音机同步

样式

display:none
```
 .radio:checked + .classOfDiv { display:block }
```
.classOfDiv 它有一个放在前面的兄弟元素(在代码中,它更像是在上面或左边)它和那个兄弟(哥哥?)具有的类名 .radio 也会被检查…设置那个 display block .

+ 相邻兄弟组合器

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

Adjacent Sibling Combinator

for Attribute