根据选择显示不同的界面

最新推荐文章于 2022-01-07 10:48:53 发布

iteye_2903

最新推荐文章于 2022-01-07 10:48:53 发布

阅读量417

点赞数

分类专栏： javascript 文章标签： Java HTML

本文链接：https://blog.csdn.net/iteye_2903/article/details/81688629

版权

javascript 专栏收录该内容

112 篇文章 1 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>根据选择显示不同的界面</title>

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is my page">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <script type="text/javascript">
   function init(){
    if(teacher.checked){
     teacherForm.style.display='';
     studentForm.style.display='none';
    }
    else{
     teacherForm.style.display='none';
     studentForm.style.display='';
    }
   }
   </script>
</head>

<body onload="init()">
   <input type="radio" checked="checked" value="老师" name="test"
    id="teacher"
    onclick="teacherForm.style.display='';studentForm.style.display='none'">
   老师
   <input type="radio" value="学生" name="test" id="student"
    onclick="teacherForm.style.display='none';studentForm.style.display=''">
   学生
   <br>
   <form action="" id="teacherForm">
    <TABLE id="table1" width="50%" border=0>
     <TBODY>
      <TR>
       <TD>
        教师姓名:
       </TD>
       <TD>
        <input type="text">
       </TD>
      </TR>
      <TR>
       <TD>
        所在部门:
       </TD>
       <TD>
        <input type="text">
       </TD>
      </TR>
     </TBODY>
    </TABLE>
   </form>

   <form action="" id="studentForm" style="display:'none'">
    <TABLE id="table2" width="50%" border=0 >
     <TBODY>
      <TR>
       <TD>
        学生姓名:
       </TD>
       <TD>
        <input type="text">
       </TD>
      </TR>
      <TR>
       <TD>
        所在班级:
       </TD>
       <TD>
        <input type="text">
       </TD>
      </TR>
     </TBODY>
    </TABLE>
   </form>
</body>
</html>