横竖栏目分类效果
源文件下载:
横竖栏目分类效果.rar
(1.35 KB)
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>设置</title>
<style>body{font-size: 14px; color: #000000;}table{border-collapse: collapse;font-size: 14px; color: #000000;}
</style>
<script>
function sList(id){
for (var i1=1;i1<6;i1++){document.getElementById("dlist"+i1).style.display="none"}
document.getElementById("dlist"+id).style.display="";
}
function sName(id){
for (var i1=1;i1<=3;i1++){document.getElementById("sname"+i1).style.display="none";document.getElementById("iname"+i1).style.backgroundColor="#95CAFF";}
document.getElementById("sname"+id).style.display="";
document.getElementById("iname"+id).style.backgroundColor="#FFFFFF";
}
</script>
</head>
<body onload="sList(1);sName(1);" topmargin="5" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="100%" cellpadding="0" id="table1" height="100%" style="border-collapse: collapse">
<tr>
<td height="35">
<table border="1" cellpadding="3" id="table2" height="100%" style="border-collapse: collapse" bordercolor="#D0E8FF" bgcolor="#95CAFF">
<tr>
<td id="iname1" onclick="sName(1);" style="cursor:hand;">样式设置</td>
<td id="iname2" onclick="sName(2);" style="cursor:hand;">栏目设置</td>
<td id="iname3" onclick="sName(3);" style="cursor:hand;">属性设置</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table border=0 width="100%" cellspacing="0" cellpadding="0" id="table3">
<tr id="sname1" style="display:none;">
<form method="POST" name="styleForm">
<td>
<table border="0" width="100%" cellspacing="1" cellpadding="0" id="table4">
<tr onclick="sList(1)" style="cursor:hand;">
<td bgcolor="#D0E8FF" height="25">样式1:</td>
</tr>
<tr id="dlist1">
<td><b>样式1</b><p>的设置内容</td>
</tr>
<tr onclick="sList(2)" style="cursor:hand;">
<td style="text-transform: uppercase" bgcolor="#D0E8FF" height="25">
样式2:</td>
</tr>
<tr id="dlist2">
<td><b>样式2</b><p>的设置内容</p>
</td>
</tr>
<tr onclick="sList(3)" style="cursor:hand;">
<td bgcolor="#D0E8FF" height="25">样式3:</td>
</tr>
<tr id="dlist3">
<td><b>样式3</b><p>的设置内容</p>
</td>
</tr>
<tr onclick="sList(4)" style="cursor:hand;">
<td bgcolor="#D0E8FF" height="25">样式4:</td>
</tr>
<tr id="dlist4">
<td><b>样式4</b><p>的设置内容</p>
</td>
</tr>
<tr>
<td bgcolor="#D0E8FF" onclick="sList(5)" style="cursor:hand;" height="25">
样式5:</td>
</tr>
<tr id="dlist5">
<td><b>样式5</b><p>的设置内容</p>
</td>
</tr>
<tr id="dlist5">
<td align="center"><br>
<input type="button" value="保存" name="B3"></td>
</tr>
</table>
</td>
</form>
</tr>
<tr id="sname2" style="display:none;">
<td align="center" bgcolor="#E1F0FF" height="200">
<font size="6">栏目设置</font></td>
</tr>
<tr id="sname3" style="display:none;">
<td align="center" bgcolor="#E1F0FF" height="200">
<font size="6">属性设置</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
