网站菜单效果

<table width="100" border="0" cellspacing="0" cellpadding="0">
                                                                            <tr>
                                                                                <td align="center" class="hs12">
                                                                                    <span id="span1" onclick="Tab(1)" style="cursor: hand; color: #017F9D">--省级链接--</span>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td align="center" class="hs12" style="height: 20px">
                                                                                    <span id="span3" onclick="Tab(3)" style="cursor: hand; color: #000000">--区县链接--</span>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td align="center" class="hs12">
                                                                                    <span id="span4" onclick="Tab(4)" style="cursor: hand; color: #000000">--友情链接--</span>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td align="center" class="hs12">
                                                                                    <span id="span2" onclick="Tab(2)" style="cursor: hand; color: #000000">--热点链接--</span>
                                                                                </td>
                                                                            </tr>
                                                                        </table>

js部分

<script language="javascript">
                                                             function getcontrolbyid(id)
                                                                {
                                                                    return document.getElementById(id);
                                                                }
                                                               function Tab(n)
                                                                    {
                                                                        for(var i=1;i<5;i++)
                                                                        {
                                                                            if(i!=n)
                                                                            {
                                                                            //debugger
                                                                                getcontrolbyid('table'+i).style.display="none"; 
                                                                                getcontrolbyid('span'+i).style.color="#000000"; 
                                                                            }
                                                                            else
                                                                            {
                                                                                getcontrolbyid('table'+i).style.display="none";
                                                                                getcontrolbyid('span'+i).style.color="#017F9D";
                                                                            }
                                                                        }
                                                                        getcontrolbyid('table'+n).style.display="block";
                                                                    }
                                                            </script>

详细信息部分

<table id="table4" style="display: none" width="801" height="10px" align="center"
                                                                            cellpadding="2" cellspacing="2"></table>

<table id="table3" style="display: block" width="801" height="10px" align="center"
                                                                            cellpadding="2" cellspacing="2"></table>

http://www.hrbgtj.gov.cn/这底端案例