javascript+Css+div

html:

<link href="style.css" type=text/css rel=stylesheet>
<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.STYLE4 {font-size: 12px}
-->
</style>

<SCRIPT type=text/javascript>
var oldmenu = 1;
function changeTD(tdIndex)
{
        td = document.getElementById("td" + tdIndex);
        a = document.getElementById("a" + tdIndex);
        content = document.getElementById("content" + tdIndex);
        if(oldmenu!=0){
        tdx = document.getElementById("td" + oldmenu);
        ax = document.getElementById("a" + oldmenu);
        contentx = document.getElementById("content" + oldmenu);
        tdx.className = "hidden";
        ax.className = "nav2_link";
        contentx.className = "hiddencontent";
        }
        td.className = "active";
        a.className = "nav1_link";
        content.className = "activecontent";
        oldmenu = tdIndex;
}
</SCRIPT>

<div>
<table width="100%" border="1" cellspacing="3" bordercolor="#FFFFFF">
  <tr>
    <td width="20%" align="center" bordercolor="#CCCCCC" class="active" id="td1"><table width="100%" border="0" cellspacing="4">
        <tr>
    <td align="center"><a class="nav1_link" id="a1" onmouseover="changeTD(1); return false;" target="_self">1</a> </td>
    <td class="hidden" id="td2"><a class="nav2_link" id="a2" onmouseover="changeTD(2); return false;" target="_self">2</a></td>
    <td class="hidden" id="td3"><a class="nav2_link" id="a3" onmouseover="changeTD(3); return false;" target="_self">3</a></td>
    <td class="hidden" id="td4"><a class="nav2_link" id="a4" onmouseover="changeTD(4); return false;" target="_self">4</a></td>
    <td class="hidden" id="td5"><a class="nav2_link" id="a5" onmouseover="changeTD(5); return false;" target="_self">5</a></td>
        </tr>
</table>



<div class=activecontent id=content1>
1
</div>

<div class=hiddencontent id=content2>
2
</div>

<div class=hiddencontent id=content3>
3
</div>

<div class=hiddencontent id=content4>
4
</div>

<div class=hiddencontent id=content5>
5
</div>
</div>

 style.css:

 .active {
    BACKGROUND-IMAGE: url(../images/pic01.jpg)
}
.hidden {
    BACKGROUND-IMAGE: url(../images/menu_bg2.jpg)
}
.activecontent {
    
}
.hiddencontent {
    DISPLAY: none
}

原文地址:https://www.cnblogs.com/JamyWong/p/1722237.html