[英]How to hide and show content based on drop down selection
我想隐藏和显示基于下拉选择的div。 也就是说,如果我选择下拉选项1,则应显示ID为1的div,而对于ID为2的2 div则应显示。 但我想不使用jQuery但使用CSS或Javascript来执行此操作。 这可能吗? 这是我的样本。 多谢你们。
<select name="options">
<option value="1"> Loan Protection Insurance</option>
<option value="2"> GAP or Cash Assist Insurance</option>
<option value="3"> Home Insurance</option>
<option value="4"> Landlords Insurance</option>
<option value="5"> Car Insurance</option>
</select>
<div id="1">Test</div>
<div id="2">Test</div>
仅使用CSS不可能,因为您需要处理下拉菜单的change
事件并采取适当的措施。
您可以通过纯JS轻松完成此操作:
document.getElementById('id-of-select').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
演示: http : //jsfiddle.net/2ukyA/
更新:如果DIV的ID如“ divname1”等。
document.getElementById('id-of-select').onchange = function() {
var i = 1;
var myDiv = document.getElementById("divname" + i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById("divname" + ++i);
}
document.getElementById(this.value).style.display = 'block';
};
如果您不关心“选择”,则使仅css的下拉菜单非常简单。
检出: http : //www.alistapart.com/articles/horizdropdowns/
您可以使用css:hover选择器显示/隐藏内容。
即:
<ul>
<li class="menu">
group1
<div class="dropdown">dropdown content1</div>
</li>
<li class="menu">
group2
<div class="dropdown">dropdown content2</div>
</li>
<li class="menu">
group3
<div class="dropdown">dropdown content3</div>
</li>
<li class="menu">
group4
<div class="dropdown">dropdown content4</div>
</li>
<ul>
然后,您的CSS必须类似于:
.top-menu{}
.top-menu .dropdown{display:none;}
.top-menu:hover .dropdown{display:block;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.