首页 > 代码库 > js切换效果

js切换效果

2024-07-04 07:23:09   224人阅读

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body { margin:0; padding:0; text-align:center; font-size:12px; font-family:微软雅黑,宋体,Arial;}
#container { margin:0; padding:0; text-align:left;  width:100%; overflow:hidden}
p,ul,li { margin:0; padding:0; list-style-type:none}
a { text-decoration:none}
#tab { width:100%;}
#tab p a { display:block; height:40px; line-height:40px; text-align:center; width:140px; float:left; border:1px solid #e1e1e1; margin-right:10px; border-bottom:none; } 
.bg01 { color:#fff; background:#749731; border-bottom:1px solid #900;  font-size:12px;}
.bg02 { color:#000; background:#e1e1e3;  font-size:12px;}
.nr { width:100%; border:1px solid #e1e1e1; float:left; height:300px; background: #FFF;}
.hidden { display:none}
.unhidden { display:block}
.newlisttable td{border-bottom:1px solid #efefef; height: 35px;}
</style>
<script>
function tab(id)
{
	for (i=1;i<3;i++)
	{
		document.getElementById("a0"+i).className="bg02";
		document.getElementById("ul0"+i).className="hidden";
	}
		document.getElementById("a0"+id).className="bg01";
		document.getElementById("ul0"+id).className="unhidden";
	}
</script>
</head>
<body>
	<div id="container">
		<div id="tab">
             <p>
                <a id="a01" onclick="tab(1)" class="bg01">图文资料</a>
                <a id="a02" onclick="tab(2)" class="bg02">视频资料</a>
             </p>
       		 <div style="clear:both;"></div>
                  <div class="nr">

                    <div id="ul01" class="unhidden">
                    <table cellpadding="0" cellspacing="0" border="0" class="newlisttable" width="100%">
                      <tbody><tr>
                         <td align="right" width="10%">知识库分类：</td><td align="left" width="90%"><select name="classid"><option value="">高血压</option><option></option></select></td>
                      </tr>
                     
                      <tr>
                          <td align="right">标题：</td><td align="left"><input type="text" name="qq" style="width:360px;"></td>
                      </tr>
                      <tr>
                          <td align="right">消耗点数：</td><td align="left"><input type="text" style="width:48px;" value="http://www.mamicode.com/0"> 点</td>
                      </tr>
                      <tr>
                          <td align="right">审核：</td><td align="left"><input type="radio" name="issh" checked="" value="http://www.mamicode.com/1"> 是<input type="radio" name="issh" value="http://www.mamicode.com/0"> 否，推荐：<input type="radio" name="istj" value="http://www.mamicode.com/1"> 是<input type="radio" name="istj" checked="" value="http://www.mamicode.com/0"> 否</td>
                      </tr>
                      <tr>
                          <td align="right">内容：</td><td align="left"><textarea rows="5" cols="70">做成富文本编辑器，可以上传图片，WORD，PDF等</textarea></td>
                      </tr>
                      
                      <tr>
                          <td align="right"></td><td align="left"><input type="submit" value="http://www.mamicode.com/提交数据" style="width:120px;height:30px;"></td>
                      </tr>
                      <tr>
                       <td colspan="3"></td>
                      </tr>
                </tbody></table>
                </div>





                <div id="ul02" class="hidden">
                          <table cellpadding="0" cellspacing="0" border="0" class="newlisttable" width="100%">
                      <tbody><tr>
                         <td align="right" width="10%">知识库分类：</td><td align="left" width="90%"><select name="classid"><option value="">高血压</option><option></option></select></td>
                      </tr>
                     
                      <tr>
                          <td align="right">标题：</td><td align="left"><input type="text" name="qq" style="width:360px;"></td>
                      </tr>
                      <tr>
                          <td align="right">消耗点数：</td><td align="left"><input type="text" style="width:48px;" value="http://www.mamicode.com/0"> 点</td>
                      </tr>
                      <tr>
                          <td align="right">审核：</td><td align="left"><input type="radio" name="issh" checked="" value="http://www.mamicode.com/1"> 是<input type="radio" name="issh" value="http://www.mamicode.com/0"> 否，推荐：<input type="radio" name="istj" value="http://www.mamicode.com/1"> 是<input type="radio" name="istj" checked="" value="http://www.mamicode.com/0"> 否</td>
                      </tr>
                      <tr>
                          <td align="right">内容：</td><td align="left"><textarea rows="5" cols="70">做成富文本编辑器，可以上传图片，WORD，PDF等</textarea></td>
                      </tr>
                      
                      <tr>
                          <td align="right"></td><td align="left"><input type="submit" value="http://www.mamicode.com/提交数据" style="width:120px;height:30px;"></td>
                      </tr>
                      <tr>
                       <td colspan="3"></td>
                      </tr>
                </tbody></table>
                        </div>
                    </div>
     	       </div>
         </div>
    </body>
</html>

　　


联系
我们