用switch函数根据选择不同的radio出现不同的视图
html代码：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
#content #contentmain table tbody tr td {
border:0;
height:28px;
}
#content #contentmain table{
text-align: left;
width:100%;
}
.tabel_2{padding:10px;}
.coninf table td{line-height: 30px;}
.coninf table{width: 100%;line-height: 25px;border-collapse: collapse;}
.wxw-table{margin-bottom: 10px;}
.wxw-table td{border: 1px solid #c5c5c5;height: 28px;text-align: center;} </style>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<body>
<div id="content">
<div id="contentmain">
<form>
<table class="tabel_2" >
<tbody>
<tr >
<td><input type="radio" name="time" style="width:20px;" id="year" checked="checked"><label>每年</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="month"><label>每月</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="week"><label>每周</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="day"><label>每日</label></td>
</tr>
<tr>
<td class="year">
<select style="width:40px;">
</select>
<label>月</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>天</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>时</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>分</label>
</td>
<td class="month" style="display:none">
<select style="width:40px;">
</select>
<label>天</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>时</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>分</label>
</td>
<td class="week" style="display:none">
<select style="width:40px;">
<option>星期一</option>
<option>星期二</option>
<option>星期三</option>
<option>星期四</option>
<option>星期五</option>
<option>星期六</option>
<option>星期天</option>
</select>
<select style="width:40px;margin-left:20px;">
</select>
<label>时</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>分</label>
</td>
<td class="day" style="display:none">
<select style="width:40px;">
</select>
<label>时</label>
<select style="width:40px;margin-left:20px;">
</select>
<label>分</label>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div> </body> </html>
界面如下图：
js代码：
<script type="text/javascript">
//radio按钮选择事件
$("input[name=time]").click(function(){
showCont();
});
//根据不同的选择显示不同的视图
function showCont(){
switch($("input[name=time]:checked").attr("id")){
case "year":
$(".year").css("display","table-cell").siblings().css("display","none");
break;
case "month":
$(".month").css("display","table-cell").siblings().css("display","none");;
break;
case "week":
$(".week").css("display","table-cell").siblings().css("display","none");;
break;
case "day":
$(".day").css("display","table-cell").siblings().css("display","none");;
break;
default:
break;
}
}
<script>
视图如下：
用switch函数根据选择不同的radio出现不同的视图的更多相关文章
- SQL Server 2008 R2——PIVOT 行转列 以及聚合函数的选择
==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...
- switch函数——Gevent源码分析
在gevent的源码中,经常能看到switch函数.而不同的类中的switch函数有不同的用法 1. greenlet的switch函数 这里面的greenlet是greenlet库中的greenle ...
- Java switch函数
switch()函数中能放置的值为:byte,short,char,int,string,enum类型或者byte,short,char,int的包装类,其中,string类型是java7(含)之后才 ...
- 【3】火狐中: radio被点击以后，重刷页面，不会选择默认的radio
1.问题:火狐中radio (单选框)点击以后,重新刷新页面,不会选择默认的radio 解决:form表单中添加:autocomplete="off" autocomplete 属 ...
- if语句和switch语句的选择与区别
if语句和Switch语句的选择 if 结构 基本if选择结构: 处理单一或组合条件的情况 if-else选择结构:处理简单的条件分支情况 多重if选择结构:处理复杂的条件分支情况 嵌套if选择结构: ...
- Python switch(多分支选择)的实现
Python 中没有 switch/case 语法,如果使用 if/elif/else 会出现代码过长.不清晰等问题. 而借助字典就可以实现 switch 的功能 示例: def case1(): # ...
- JavaScript中自定义函数以及文本框、radio、下拉框的值的获取，结合淘宝竞拍案例来理解。。。
淘宝竞拍案例: HTML部分代码: <form action="#" method="post"> <h2>欢迎进入淘宝竞拍</h ...
- Y+的查看及FLUENT壁面函数的选择
y+的查看 其实,我们关心的应该是壁面y+值.那么我们看云图的话,是可以直接看到的,但是个人感觉,如果case大的话,也不是很方便.此外,你要是看云图的话,要用filled的方式,而且把node va ...
- Excel公式中双引号和单引号输入和显示以及函数的选择确认
[Excel中显示双引号] 1.直接输入双引号“”或单引号“ 2.工式中显示双引号需输入“”“”“”(六个引号)或单引号需输入“”“”(四个引号) [Excel中快速确认已选择的函数] 1.用键盘的上 ...
随机推荐
- zeromq学习记录(二)天气更新服务器使用ZMQ_SUB ZMQ_PUB
/************************************************************** 技术博客 http://www.cnblogs.com/itdef/ ...
- 2、C++
2.2定义变量 2.2.1命名规则 赋予变量的名称叫做标识符,或者更方便地称之为变量名.变量名可用字母(包括大小写),数字,以及下划线,其他字符不允许.以下划线或者字母开头.在Visual C++20 ...
- 23. Man and His Natural Habitat 人类及其自然栖息地
. Man and His Natural Habitat 人类及其自然栖息地 ① Ecology is that branch of science which concerns itself wi ...
- Fiddler调式使用(一)深入研究[转载]
Fiddler调式使用(一)深入研究 阅读目录 Fiddler的基本概念 如何安装Fiddler 了解下Fiddler用户界面 理解不同图标和颜色的含义 web session的常用的快捷键 了解we ...
- vi 基本使用命令
说明:以下的例子中 xxx 表示在命令模式下输入 xxx 并回车以下的例子中 :xxx 表示在扩展模式下输入 xxx 并回车小括号中的命令表示相关命令在编辑模式或可视模式下输入的命令会另外注明 1 查 ...
- spring p 标签
需要引入命名空间 xmlns:p="http://www.springframework.org/schema/p" p 是什么含义 p 是 property 的缩写,为了简化be ...
- CodeForces - 589J —（DFS）
Masha has recently bought a cleaner robot, it can clean a floor without anybody's assistance. Schema ...
- hdu 4946 凸包注意重点
http://acm.hdu.edu.cn/showproblem.php?pid=4946 给你n个点的坐标和速度,如果一个点能够到达无穷远处,且花费的时间是最少的,则此点输出1,否则输出0. 每个 ...
- hdu 5035 指数分布无后效性
http://acm.hdu.edu.cn/showproblem.php?pid=5035 n个柜台每个柜台服务的时间都满足指数分布t=p(k),求min(p(k)+t)的期望 指数分布一个有趣的特 ...
- centos7 源码安装python3
1.非常重要!必须得先安装py3所依赖的软件包,否则可能会出现py3安装成功,却缺少相应的pip yum groupinstall "Development tools" yum ...