乐土文化 www.laatoo.com 我爱周公网 www.52zhougong.com 1.普通选项卡实现 jQuery代码: //"box_tit ul li"为标题,"ed"为标题选中样式,"ul.box li"为标题所对应的内容 $(function(){ $(".box_tit ul li").click(function(){ $(".box_tit ul li").siblings().removeClass("ed"); $(this).addClass("ed"); var index = $(".box_tit ul li").index($(this)); $("ul.box li").css("display","none"); $("ul.box li").eq(index).css("display","block"); return false; }); }); html tit代码: <div class="box_tit"> <ul> <li class="ed"><a href="#"><span>tit1</span></a></li> <li><a href="#"><span>tit2</span></a></li> <li><a href="#"><span>tit3</span></a></li> <li><a href="#"><span>tit4</span></a></li> </ul> </div> html content代码: <ul class="box"> <li>content1</li> <li>content2</li> <li>content3</li> <li>content4</li> </ul>