基于下拉值显示/隐藏 div 没有 javascript答案

【问题标题】：Show/Hide div based on drop down value with out javascript基于下拉值显示/隐藏 div 没有 javascript
【发布时间】：2015-07-23 22:20:37
【问题描述】：

我想根据下拉选择的值切换 2 个 div，而不使用 CSS 的 javascript

<select class="number" id="number">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
</select>
<div id="one">div one</div>
<div id="two">div two</div>

当用户从下拉菜单中选择 1 时，应显示 div 1，当用户从下拉菜单中选择 2 时，应显示 div 2。

基本上需要根据下拉值切换两个div

请有人帮忙。

【问题讨论】：

你不能使用 JavaScript 有什么原因吗？
我不知道选择的东西，但这里有一个阅读更多示例，我使用纯 css jsfiddle.net/avzaoe0e
jsfiddle.net/hhxd3x25 参考此链接.. 希望对您有所帮助。
你可以使用 collapse - 可能最接近你会得到jsbin.com/Amejum/1/edit?html,css,output
谢谢 Shruti.. 你的例子对我有用。我修改它以使用 div。 #select-card:invalid ~ div[id="1"]{ display:none; } #select-card:valid ~ div[id="2"]{ display:none; }

标签： html css

【解决方案1】：

切换 div

您可以通过几种不同的方式使用纯 CSS 实现切换（和/或显示/隐藏）方面；这是一个：

* {
  margin:0;
  padding:0;
  font-family:"Helvetica Neue", Helvetica, Sans-serif;
  word-spacing:-2px;
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;

}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
width: 100px;
border-radius: 3px;
padding: 8px 10px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Open" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

CodePen.

“基于下拉值”

关于检测选择然后触发切换的条件（不带JS）。不幸的是，此时使用独立的 CSS 是不可能的，你或任何人想出的任何东西都将是一个 hack，而且比目前的标准不稳定；我相信最轻的选择是 jQuery。看看这个：CSS Equivalent of the "if" statement *

（这个问题+1，我们真的应该继续推动这样的 CSS 改进）

【讨论】：