js切换效果
时间：2014-05-16 20:27:27
收藏：0
阅读：365
<!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="0"> 点</td>
</tr>
<tr>
<td align="right">审核：</td><td align="left"><input type="radio" name="issh" checked="" value="1"> 是<input type="radio" name="issh" value="0"> 否，推荐：<input type="radio" name="istj" value="1"> 是<input type="radio" name="istj" checked="" value="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="提交数据" 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="0"> 点</td>
</tr>
<tr>
<td align="right">审核：</td><td align="left"><input type="radio" name="issh" checked="" value="1"> 是<input type="radio" name="issh" value="0"> 否，推荐：<input type="radio" name="istj" value="1"> 是<input type="radio" name="istj" checked="" value="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="提交数据" style="width:120px;height:30px;"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
</body>
</html>
评论（0）