华东六省15选5开奖 www.jpzd.net html代码
<ul class="tab"> <li>最新</li> <li class="cur">热门</li> <li>新闻</li> </ul> <div>11</div> <div class="on">22</div> <div>33</div>
css代码
div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;} .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;} .tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:pointer; } .on{display:block;} .tab li.cur{background:blue;}
js代码
$(document).ready(function(){ $(".tab li").click(function(){ $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); $("div").hide().eq($(this).index()).show(); //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on'); }); });
PREVIOUS:
linux 如何重启apache
NEXT:
dedecms首页调用封面页内容的方法
您可能喜欢
相关评论(0)
发 布 (Ctrl+Enter)
还没有评论,快来抢沙发吧!