Code： Div+CSS+Js导航 <br /> #info<br /> {<br /> float:left;<br /> width:100%;<br /> font-size:93%;<br /> line-height:16px;<br /> <br /> }<br /> #info1,#info2,#info3{ border:1px solid #ccc;padding:10px;background:#fff; clear:both;width:500px; height:300px; margin-left:10px; }<br /> .hd {display:none;}<br /> .sw {display:block;}<br /> #info li {float:left;}<br /> #info li a:hover span<br /> {<br /> float:left;<br /> display:block;<br /> background:url("images/tabright2_02.gif") no-repeat right top;<br /> padding:5px 15px 4px 6px;<br /> color:#84776B;<br /> }<br /> #info li a:hover<br /> {<br /> float:left;<br /> background:url("images/tableft2_02.gif") no-repeat left top;<br /> margin:0;<br /> padding:0 0 0 4px;<br /> text-decoration:none;<br /> } <p> .aa {<br /> float:left;<br /> background:url("images/tableft2_01.gif") no-repeat left top;<br /> margin:0;<br /> padding:0 0 0 4px;<br /> text-decoration:none;<br /> }<br /> <br /> .bb {<br /> float:left;<br /> display:block;<br /> background:url("images/tabright2_01.gif") no-repeat right top;<br /> padding:5px 15px 4px 6px;<br /> color:#84776B;<br /> } <p> .cc {<br /> float:left;<br /> background:url("images/tableft2_02.gif") no-repeat left top;<br /> margin:0;<br /> padding:0 0 0 4px;<br /> text-decoration:none;<br /> }<br /> .dd {<br /> float:left;<br /> display:block;<br /> background:url("images/tabright2_02.gif") no-repeat right top;<br /> padding:5px 15px 4px 6px;<br /> color:#84776B;<br /> } <p> 最新产品 最新功能 最新下载 网店管家--你身边的电子商务专家1 网店管家--你身边的电子商务专家2 网店管家--你身边的电子商务专家3 <br /> var k = 1;<br /> for(i=1; i <4; i++)<br /> {<br /> if( i==k)<br /> {<br /> document.getElementById("info"+i).className="sw";<br /> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="cc";<br /> document.getElementById("tag"+i).getElementsByTagName("span")[0].className="dd";<br /> }<br /> else<br /> {<br /> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="aa";<br /> document.getElementById("tag"+i).getElementsByTagName("span")[0].className="bb";<br /> document.getElementById("info"+i).className="hd";<br /> }<br /> }<br /> function ChkTag(tag){ <br /> for(i=1; i <4; i++)<br /> {<br /> if (i==tag)<br /> { <br /> document.getElementById("info"+i).className="sw";<br /> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="cc";<br /> document.getElementById("tag"+i).getElementsByTagName("span")[0].className="dd";<br /> }<br /> else<br /> {<br /> document.getElementById("tag"+i).getElementsByTagName("a")[0].className="aa";<br /> document.getElementById("tag"+i).getElementsByTagName("span")[0].className="bb";<br /> document.getElementById("info"+i).className="hd";<br /> }<br /> }<br /> }<br /> 用到的图片：
