海量企业网站模板 · 任您选择
美出特色，精出品质，一切为了企业更好的营销
<script type="text/javascript">
function switchMenu(curr_id, total_num)
{
for(var i=0; i<total_num; i++)
{
//二级菜单
var el = document.getElementById('menu_sub_'+i);
if(!el) return;
//一级菜单前面的图片
var img = document.getElementById('menu_master_'+i);
if(i == curr_id)
{
el.style.display = "block";
img.src = "/wp-content/uploads/examples/switch-menu/open.gif";
}
else
{
el.style.display = "none";
img.src = "/wp-content/uploads/examples/switch-menu/close.gif";
}
}
}
</script>
<style type="text/css">
<!--
#warp {
width:200px;
margin:20px auto;
height:300px;
}
.menu_master {
border:1px solid #ccc;
padding:5px 10px;
margin-bottom:2px;
cursor:pointer;
font-weight:bold;
color:#666;
}
.menu_master img { vertical-align:middle; }
.sub_menu { display:none; }
.sub_menu ul, .sub_menu ul li {
margin:0;
padding:0;
list-style:none;
}
.sub_menu ul li a {
margin:0 0 3px 10px;
padding:3px 0 2px 25px;
background:url(/wp-content/uploads/examples/switch-menu/arrow_001.gif) no-repeat 5px center;
display:block;
height:18px;
border-bottom:1px solid #eee;
color:#666;
text-decoration:none;
}
-->
</style>
<div id="warp">
<div class="menu_master" onclick="javascript:switchMenu(0, 4);">
<img src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_0" /> PHP/MySQL
</div>
<div id="menu_sub_0" class="sub_menu">
<ul>
<li><a href="/pub/html/php_mysql/tutorial/" title="PHP/MySQL教程">PHP/MySQL教程</a></li>
<li><a href="/pub/html/php_mysql/tip/" title="PHP/MySQL小技巧">PHP/MySQL小技巧</a></li>
<li><a href="/pub/html/php_mysql/problem/" title="PHP/MySQL常见问题">PHP/MySQL常见问题</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(1, 4);">
<img src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_1" /> (X)HTML/CSS
</div>
<div id="menu_sub_1" class="sub_menu">
<ul>
<li><a href="/pub/html/xhtml_css/tutorial/" title="(X)HTML/CSS教程">(X)HTML/CSS教程</a></li>
<li><a href="/pub/html/xhtml_css/tip/" title="(X)HTML/CSS小技巧">(X)HTML/CSS小技巧</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(2, 4);">
<img src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_2" /> Ajax
</div>
<div id="menu_sub_2" class="sub_menu">
<ul>
<li><a href="/pub/html/ajax/tutorial/" title="Ajax教程">Ajax教程</a></li>
<li><a href="/pub/html/ajax/tip/" title="Ajax小技巧">Ajax小技巧</a></li>
</ul>
</div>
<div class="menu_master" onclick="javascript:switchMenu(3, 4);">
<img src="/wp-content/uploads/examples/switch-menu/close.gif" alt="close" id="menu_master_3" /> Javascript
</div>
<div id="menu_sub_3" class="sub_menu">
<ul>
<li><a href="/pub/html/javascript/tutorial/" title="Javascript教程">Javascript教程</a></li>
<li><a href="/pub/html/javascript/tip/" title="Javascript小技巧">Javascript小技巧</a></li>
</ul>
</div>
</div></td>
</tr>
</table>
