<head> <title></title> <style type="text/css"> body{font-size:13px;} ul,li{margin:0;padding:0;list-style:none} #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer} #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative;} #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px;} #content li{display:none} #content li.conFocus{display:none;} </style> <script src="Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript">
$(function () { $("#menu li").each(function (index) { $(this).click(function () { $("#menu li.tabFocus").removeClass("tabFocus"); $(this).addClass("tabFocus"); $("#content li:eq(" + index + ")").show().siblings().hide(); }) }) }) </script></head><body><ul id="menu"><li class="tabFocus">家居</li><li>电器</li><li>二手</li></ul><ul id="content"><li class="conFocus">我是我家居的内容</li><li>欢迎您来到电器城</li><li>二手市场，产品丰富发多彩</li></ul></body>
转载于:https://www.cnblogs.com/qzc900809/archive/2013/04/23/3038765.html
相关资源：jquery垂直导航菜单展开收缩垂直二级导航菜单代码