注册 登录
编程论坛 JavaScript论坛

横竖栏目分类效果

dkp88 发布于 2009-10-25 00:15, 714 次点击
源文件下载:
只有本站会员才能查看附件,请 登录


<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>
0 回复
1