## 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的值獲取需要顯示的子元素 }) }) ```