用Juery实现网页选项卡

首先前台代码

View Code

1 <div class="tab">
2 <div class="tab_menu">
3 <ul>
4 <li class="selected">个人信息</li>
5 <li class="selected">我的照片</li>
6 <li class="selected">我的博客</li>
7 <div class="clear"></div>
8 </ul>
9 </div>
10 <div class="tab_box">
11 <div class="box">我的QQ:1511109272</div>
12 <div class="box hide">hi </div>
13 <div class="box hide"> hello <br> </div>
14 </div>
15  </div>

接着可以jquery代码设置

View Code

1 $(function() {
2 //网页选项卡的切换
3   var $menu_li = $("div.tab_menu ul li");
4 $menu_li.click(function(){
5 $(this).addClass("selected") //当前<li>高亮
6   .siblings().removeClass("selected"); //去掉其它同辈<li>的高亮
7   var index = $menu_li.index( $(this) ); //找到<li>子节点的索引
8   $("div.tab_box > div") //索引为N的DIV显示出来
9   .eq(index).show()
10 .siblings().hide();
11 })
12 })

然后CCS样式可以设置一下

View Code

1 .clear{ clear:both; height:0px; overflow:hidden;}
2 .tab{ width:400px; font-size:12px;}
3 .tab_menu ul{ padding:0px;margin:0px;}
4 .tab_menu li{ list-style:none; display:block; float:left;
5 background:#C2CEFE; height:22px; line-height:22px;
6 padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;
7 }
8 .box{ width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
9 .tab_menu ul li.selected{background:#dadada; cursor:pointer; }
10 .hide{ display:none;}

转载于:https://www.cnblogs.com/wsl2011/archive/2011/06/13/2079968.html