|
程序代码:
<style>
#1_1 {padding:5px 0 5px 0; width:800px; height:39px; border:1px solid #808080; overflow:hidden;}
#1_1 a {float:left; display:block; margin-left:5px; width:100px; line-height:25px; border:1px solid #808080; text-align:center; text-decoration:none;}
#1_1 a:hover {color:red;}
#2_1,#2_2,#2_3,#2_4,#2_5,#2_6,#2_7 {padding:5px 0 5px 0; width:800px; line-height:39px; border-left:1px solid #808080; border-bottom:1px solid #808080; border-right:1px solid #808080; text-align:center; overflow:hidden;}
</style>
<script type="text/javascript">
function g(o) {return document.getElementById(o);}
function Li(n) {for(var i=1;i<8;i++){if(n==i){g("2_"+i).style.display="block";}else{g("2_"+i).style.display="none";}}}
</script>
<div id="1_1">
<a href="#" onmouseover="Li(1);">大类①</a>
<a href="#" onmouseover="Li(2);">大类②</a>
<a href="#" onmouseover="Li(3);">大类③</a>
<a href="#" onmouseover="Li(4);">大类④</a>
<a href="#" onmouseover="Li(5);">大类⑤</a>
<a href="#" onmouseover="Li(6);">大类⑥</a>
<a href="#" onmouseover="Li(7);">大类⑦</a>
</div>
<div id="2_1" style="display:none;">①小类① | ①小类② | ①小类③ | ①小类④ | ①小类⑤ | ①小类⑥ | ①小类⑦</div>
<div id="2_2" style="display:none;">②小类① | ②小类② | ②小类③ | ②小类④ | ②小类⑤ | ②小类⑥ | ②小类⑦</div>
<div id="2_3" style="display:none;">③小类① | ③小类② | ③小类③ | ③小类④ | ③小类⑤ | ③小类⑥ | ③小类⑦</div>
<div id="2_4" style="display:none;">④小类① | ④小类② | ④小类③ | ④小类④ | ④小类⑤ | ④小类⑥ | ④小类⑦</div>
<div id="2_5" style="display:none;">⑤小类① | ⑤小类② | ⑤小类③ | ⑤小类④ | ⑤小类⑤ | ⑤小类⑥ | ⑤小类⑦</div>
<div id="2_6" style="display:none;">⑥小类① | ⑥小类② | ⑥小类③ | ⑥小类④ | ⑥小类⑤ | ⑥小类⑥ | ⑥小类⑦</div>
<div id="2_7" style="display:none;">⑦小类① | ⑦小类② | ⑦小类③ | ⑦小类④ | ⑦小类⑤ | ⑦小类⑥ | ⑦小类⑦</div> |
|