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出现不同的视图的更多相关文章

  1. SQL Server 2008 R2——PIVOT 行转列 以及聚合函数的选择

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  2. switch函数——Gevent源码分析

    在gevent的源码中,经常能看到switch函数.而不同的类中的switch函数有不同的用法 1. greenlet的switch函数 这里面的greenlet是greenlet库中的greenle ...

  3. Java switch函数

    switch()函数中能放置的值为:byte,short,char,int,string,enum类型或者byte,short,char,int的包装类,其中,string类型是java7(含)之后才 ...

  4. 【3】火狐中: radio被点击以后，重刷页面，不会选择默认的radio

    1.问题:火狐中radio (单选框)点击以后,重新刷新页面,不会选择默认的radio 解决:form表单中添加:autocomplete="off" autocomplete 属 ...

  5. if语句和switch语句的选择与区别

    if语句和Switch语句的选择 if 结构 基本if选择结构: 处理单一或组合条件的情况 if-else选择结构:处理简单的条件分支情况 多重if选择结构:处理复杂的条件分支情况 嵌套if选择结构: ...

  6. Python switch(多分支选择)的实现

    Python 中没有 switch/case 语法,如果使用 if/elif/else 会出现代码过长.不清晰等问题. 而借助字典就可以实现 switch 的功能 示例: def case1(): # ...

  7. JavaScript中自定义函数以及文本框、radio、下拉框的值的获取，结合淘宝竞拍案例来理解。。。

    淘宝竞拍案例: HTML部分代码: <form action="#" method="post"> <h2>欢迎进入淘宝竞拍</h ...

  8. Y+的查看及FLUENT壁面函数的选择

    y+的查看 其实,我们关心的应该是壁面y+值.那么我们看云图的话,是可以直接看到的,但是个人感觉,如果case大的话,也不是很方便.此外,你要是看云图的话,要用filled的方式,而且把node va ...

  9. Excel公式中双引号和单引号输入和显示以及函数的选择确认

    [Excel中显示双引号] 1.直接输入双引号“”或单引号“ 2.工式中显示双引号需输入“”“”“”(六个引号)或单引号需输入“”“”(四个引号) [Excel中快速确认已选择的函数] 1.用键盘的上 ...

随机推荐

  1. 检测空值，以及会不会出现mapping类型不一致的问题

    /// <summary> /// 检测空值,以及会不会出现mapping类型不一致的问题 /// </summary> /// <typeparam name=&quo ...

  2. 十年前，女：“对不起，我不会喜欢你的，你不要再坚持了，就好比让 Linux 和 Windows 同时运行在一台PC机上，可能吗？

    1.十年前,女:“对不起,我不会喜欢你的,你不要再坚持了,就好比让 Linux 和 Windows 同时运行在一台PC机上,可能吗?”男生听后默默走开, 十年后,在一次虚拟技术大会上,我听到一名虚拟技 ...

  3. hdu-1171（多重背包+二进制优化）

    题目链接: 思路:找每次最多装一半的情况,注意数组范围,前几次dp开小了,一直RE. #include<iostream> #include<cstdio> #include& ...

  4. linux将程序扔到后台并获取程序的进程号

    我们经常需要写一些执行时间较长的程序,但是如果在程序执行过程中超时了,有许多原因,可能是程序已经挂起了,这时就需要杀死这样的进程,则可以通过如下的命令执行: java -jar TestProcess ...

  5. SPSS-非参数检验—两独立样本检验 案例解析

    今天跟大家研究和分享一下:spss非参数检验——两独立样本检验, 我还是引用教程里面的案例,以:一种产品有两种不同的工艺生产方法,那他们的使用寿命分别是否相同 下面进行假设:1:一种产品两种不同的工艺 ...

  6. mysql-5.7.10普通安装

    这里安装的是最新的MySQL 5.7.10,下载网址为:http://dev.mysql.com/downloads/mysql/,本文选择是的"Linux - Generic"下 ...

  7. netty 原理

    netty 实现 1. 各组件之间的关系 每个ServerBootstrap与一个事件循环对象(一个线程)都会与一个Channel绑定,如NioServerSocketChannel 2. 如何绑定 ...

  8. JAVA实现WC.exe功能

    项目要求 实现一个统计程序,它能正确统计程序文件中的字符数.单词数.行数,以及还具备其他扩展功能,并能够快速地处理多个文件. 具体功能要求: 程序处理用户需求的模式为: wc.exe [paramet ...

  9. jquery使用ajax报错[Uncaught SyntaxError: Unexpected token :]

    $.post('/ajax/validate.do',{"id": id},function(ret){ //ret }); 返回值明明是json,格式也是正确的,却解析不成功,在 ...

  10. 为上海莫大型重工企业提供基于TFS的软件研发流程管理培训

    这周,和微软公司的朋友一起,受上海莫大型重工企业的要求,为企业软件部门一个60多人的软件团队提供了为其2天的全流程培训,培训基于微软Team Foundation Server 2017(TFS 20 ...