原文地址http://www.sub-273.com/archives/232 JQuery代码 $(document).ready(function(){ $(".slide_content:gt(0)").hide(); $(".slideTit li a").click(function(){ var aIndex = $("li a").index($(this)); $(".slide_content").eq(aIndex).show().siblings().hide(); }); }); CSS代码 .slide{width:300px;height:300px;font-family:"微软雅黑";font-size:14px;} .slideTit{width:300px;height:30px;} .slideTit ul{margin:0px;padding:0px;list-style:none outside none;} .slideTit ul li{ float:left; width:60px; height:30px; line-height:30px; border:solid 1px #CCC; text-align:center; margin-right:1px;} .slideTit li a{text-decoration:none;color:#333;} .slideTit li a:hover{text-decoration:underline;} .slideArea{width:298px;margin-top:20px;overflow-x:hidden;} .slideArea .slide_content{ width:249px; height:200px; border:solid 1px #CCC; position:relative; float:left;} html代码 <div class="slide"> <div class="slideTit"> <ul> <li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域1</a></li> <li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域2</a></li> <li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域3</a></li> <li><a href="javascript:void(0)" mce_href="javascript:void(0)">区域4</a></li> </ul> </div> <div class="slideArea"> <div class="slide_content">这个区域1..</div> <div class="slide_content">这个区域2..</div> <div class="slide_content">这个区域3..</div> <div class="slide_content">这个区域4..</div> <div class="slide_content">这个区域5..</div> </div> </div>