## JQuery页面点击切换效果 >效果如图  >html代码 ``` <div class="box"> <ul> <li class="on">一</li> <li>二</li> </ul> <div class="content"> <div>页面一</div> <div class="hide">页面二</div> </div> </div> ``` >css代码 ``` * { margin: 0; padding: 0; } .box {; width: 400px; height: 550px; border: 1px solid black; overflow: hidden; } ul {overflow: hidden;} li { list-style: none; float: left; width: 50%; line-height: 50px; text-align: center } .on { background: cadetblue; color: #fff; } .content { position: relative; //给外容器加相对定位 } .content>div { position: absolute; //给里面的div绝对定位使其“堆在一起” height: 500px; } .hide { display: none; //给不显示的加隐藏效果 } ``` >js代码 ``` $(function(){ $("ul>li").click(function(){ $(this).addClass("on").siblings().removeClass("on"); //给当前元素加class"on",兄弟元素取消 $(".content>div").eq($(this).index()).show().siblings().hide(); //获取当前元素的index值并给予子元素，通过index的值获取需要显示的子元素 }) }) ```