根据单选按钮隐藏/显示Div(仅CSS) [英] hiding/showing a Div based on a Radio button (CSS Only)

问题描述

我正在寻找仅CSS的答案，我可以使用Javascript/Jquery解决，但是我尝试不使用.

I'm looking for a CSS only Answer, I can solve with Javascript/Jquery but I'm attempting to solve without.

简而言之，我必须单击单选按钮，如果要选择第一个div，则希望显示一个div，如果选择了第二个，则希望显示第二个div.

IN short, I have to Radio buttons, I would like one div to be displayed if the first one is selected and a Second div if the second one is selected.

我用myProblem的简化版本创建了一个jsfiddle https://jsfiddle.net/lukehammer/x7yw432d/5/我无法获取在JS小提琴或我的代码中工作.

I have Created a jsfiddle with a simplified version of myProblem https://jsfiddle.net/lukehammer/x7yw432d/5/ I can not get it to work in the JS fiddle or my code.

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

How can I show a div when a radio button is pressed ?

**奖励积分**

如果过渡可以淡入/淡出，则奖励BounS点.

BounS Points if the Transition can fade in/out.

推荐答案

布局

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

1. Set each radio before a div (fieldset in this demo)

在每个电台上:

• 分配唯一的 #id
• 分配相同的 [名称]

接下来，使用属性 [for] 制作2个标签，并将每个属性的值设置为收音机的 #id .标签的 [for] 属性将使用相同的 #id 同步到收音机，以便在单击标签时也可以单击收音机.

Next make 2 labels with the attribute [for] and set each attribute's value to an #id of a radio. The [for] attribute of the labels are synced to the radio with the same #id so that when the label is clicked so is the radio.

将这些标签放置在页面上的任何位置.

Place these labels anywhere you want on the page.

为了简化工作，分配一个将相似标签分组在一起的类.

To make things easier assign a class that will group alike tags together.

---

样式

1. 通过设置 display:none

制作以下规则集(请记住布局的第5步)

Make the following ruleset (remember step 5 of Layout)

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

CSS规则集由浏览器向后读取:任何具有 .classOfDiv 的className的元素，并且具有同级元素(在代码中更像是在上方或左侧)，而同级元素(哥哥?)的元素都具有className恰好也检查了 .radio 和 ...将 .classOfDiv display 属性设置为阻止.

CSS rulesets are read backwards by the browser: Any element that has the className of .classOfDiv that has a sibling element that is placed before (in code it's more like above or to the left) it and that sibling (older brother?) has the className of .radio and happens to be checked as well...set that .classOfDiv display property to block.

+ 被称为相邻兄弟组合器，这是此规则集的关键.有关更多详细信息，请参见演示后面的参考.

The + is called an Adjacent Sibling Combinator which is the key to this ruleset. See the References located after the Demo for more details.

---

演示

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

相邻兄弟组合

属性

这篇关于根据单选按钮隐藏/显示Div(仅CSS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！