设置默认无线电按钮+关联分区
设置默认无线电按钮+关联分区
提问于 2014-01-11 01:06:07
我正在创建一个小部件，它利用程式化的收音机和div来显示不同的数据位，基于贵金属商品的报价。当页面加载时，我需要收音机“当前”默认加载。使用checked="checked"确实会检查启用收音机(通过在标签下划线)，但它不会加载相关的div。我也需要在默认情况下加载div。
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
});
});
</script>
</head>
<body>
<div id="title">
<text id="titletext">Commodities</text>
</div>
<div id="titleaccent">
</div>
<!--The form for the radio toggle buttons-->
<form name="range">
<input id="rdb1" class="radio" type="radio" name="toggler" value="1" >
<label for="rdb1">Current</label>
<input id="rdb2" class="radio" type="radio" name="toggler" value="2" >
<label for="rdb2">24-Hour</label>
<input id="rdb3" class="radio" type="radio" name="toggler" value="3" >
<label for="rdb3">Week</label>
<input id="rdb4" class="radio" type="radio" name="toggler" value="4" >
<label for="rdb4">Month</label>
</form>
<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="toHide" style="display:none">
Current commodity quote info here
</div>
<div id="blk-2" class="toHide" style="display:none">
24-hour comparison of commodity quote info here
</div>
<div id="blk-3" class="toHide" style="display:none">
Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide" style="display:none">
Monthly comparison of commodity quote info here
</div>
</body>
</html>CSS：
#title{
background-color: #103346;
height: 28px;
width: 305px;
}
#titletext{
color: #ffffff;
font-size: 15pt;
position: fixed;
top: 11px;
left: 18px;
}
#titleaccent{
background-color: #C3A43F;
height: 6px;
width: 305px;
}
.radio{
display: none;
margin: 10px;
}
.radio + label{
display:inline-block;
margin:-2px;
padding: 4px 12px;
}
.radio:checked + label{
text-decoration: underline;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-11 01:08:46
使用一些CSS和JS
http://jsfiddle.net/cW4DR/1/
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$('.current').hide();
$("#blk-"+$(this).val()).show(100);
});
});.toHide{
display:none;
}
.current{
display:block;
}Stack Overflow用户
发布于 2014-01-11 01:28:46
做：
<input type="radio" name="toggler" ... checked>
$(function(){
var whatever = function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show(100);
};
$("[name=toggler]").click(whatever);
$("[name=toggler]:checked").each(whatever);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21057224
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号