动态的隐藏标签,当一个页面需要根据用户动态选择显示标签时。
原本一直使用的最“朴素”的document.getElementById(“id”).style.display="block"/"none";来控制标签的显示和隐藏
直到有一天一个页面有4种状态,30个标签。看的自己眼睛都花了,而且当标签修改的时候更是痛苦。
以下是目前想到的方法,通过class的类别来控制标签的显示和隐藏,以后增加删除标签的时候js部分也不需要修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div hidden</title>
</heaad>
<body>
<div class="h">
<div class="human man">
胡子
</div>
<div class="human woman">
化妆包
</div>
<div class="human children">
奶瓶
</div>
<div class="human">
头发
</div>
</div>
<div id="radio">
<div class="radio-box">
<input name="status" type="radio" id="man" value="man" checked>
<label for="man">man</label>
</div>
<div class="radio-box">
<input type="radio" id="woman" value="woman" name="status" >
<label for="woman">woman</label>
</div>
<div class="radio-box">
<input type="radio" id="children" value="children" name="status" >
<label for="children">children</label>
</div>
</div>
<div>
<div>
<input name="" type="button" οnclick="load()" value="确定">
</div>
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
function load(){
var t=$('input:radio:checked').val();
$('.human').hide();
$('.'+t).show();
}
</script>
</html>