zoukankan      html  css  js  c++  java
  • 单击单选按钮切换对应的菜单代码

    代码简介:点击单选按钮,相对应的选项会跟着改变,这是一款非常实用的小技巧,很多时候我们都能用得上,这要归功于JavaScript的功劳;另外,本段代码也示例了用CSS布局表单的方法,那就是多用Lable,这样能产生一行一列的对应效果。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>单击单选按钮切换对应的菜单代码_网页代码站(www.webdm.cn)</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    fieldset{378px;border:1px #B0C0D1 solid;padding:10px;}
    legend{background:#B0C0D1;padding:4px 10px;color:#fff;}
    #c{margin-top:10px;}
    .c1,.c2{378px;line-height:20px;}
    .c1{color:#014CC9;}
    .c2{color:#7E6095;}
    h3{font-size:16px;padding:5px 0;}
    .red{color:#BD0A01;}
    </style>
    <script type="text/javascript">
    function radioShow(){
    	var myradio=document.getElementsByName("myradio");  //获取标签名为myradio的标签
    	var div=document.getElementById("c").getElementsByTagName("div");
    	for(i=0;i<div.length;i++){
    	if(myradio[i].checked){
    	div[i].style.display="block";
    	}
    	else{
    	div[i].style.display="none";
    	}
    	}
    	}
    </script>
    </head>
    <body>
    <form name="ck">
    <fieldset>
    <legend>I'm Radio</legend>
    <h3>请选择您要学习的内容:</h3>
    <label for="r1" class="red"><input name="myradio" id="r1" type="radio" value="" checked="checked" 
    
    onclick="radioShow();" />XML教程</label>
    <label for="r2" class="red"><input name="myradio" id="r2" type="radio" value=""  onclick="radioShow();" />浏览
    
    器脚本</label>
    	<div id="c">
    	<div class="c1">
    	<label for="dtd"><input name="c2" id="dtd" type="checkbox" value="" />DTD</label>
    	<label for="xsl"><input name="c2" id="xsl" type="checkbox" value="" />XSL</label>
    	<label for="xlink"><input name="c2" id="xlink" type="checkbox" value="" />XLink </label>
    	</div>
    	<div class="c2" style="display:none;">
    	<label for="js"><input name="c3" id="js" type="checkbox" value="" />JavaScript</label>
    	<label for="hd"><input name="c3" id="hd" type="checkbox" value="" />HTML DOM</label>
    	<label for="dhtml"><input name="c3" id="dhtml" type="checkbox" value="" />DHTML</label>
    	</div>
    	</div>
    </fieldset>
    </form>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/4ac6c5d4-b424-458b-b6eb-06d9ca29e268.html

  • 相关阅读:
    51 Nod 1068 Bash游戏v3
    51 Nod Bash 游戏v2
    51 Nod 1073 约瑟夫环
    UVA 12063 Zeros and ones 一道需要好好体会的好题
    51 Nod 1161 Partial sums
    2018中国大学生程序设计竞赛
    UVA 11971 Polygon
    UVA 10900 So do you want to be a 2^n-aire?
    UVA 11346 Possibility
    python with as 的用法
  • 原文地址:https://www.cnblogs.com/webdm/p/2007598.html
Copyright © 2011-2022 走看看