<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 选项卡切换</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> *{ padding:0; margin:0} body{overflow: hidden;} .wrap{position: relative; 300px;height: 200px;margin: 30px auto} .wrap .btn {position: absolute;z-index: 10;right: 10px;bottom: 10px} .wrap .btn li{list-style: none;height: 10px; 10px;border-radius: 5px;background: #000;margin: 0 5px;float: left;} .wrap .btn li.on{background: #fff} .wrap .con li{ 300px;height: 200px;position: absolute; list-style: none;line-height: 200px;font-size: 50px;text-align:center;color: #fff} .next,.prev{position: absolute;font-size: 30px;top: 90px;text-shadow:3px 3px 5px #000;} .prev{left: -40px;} .next{right: -40px} </style> </head> <body> <div class="wrap"> <ul class="btn"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="con"> <li style="background:red">1</li> <li style="background:yellow;display: none;">2</li> <li style="background:blue;display: none;">3</li> <li style="background:yellow;display: none;">4</li> <li style="background:blue;display: none;">5</li> </ul> <div class="prev"><</div> <div class="next">></div> </div> <script type="text/javascript"> var Tab = function(){ this.btn = $(".btn li"); this.prev = $(".prev"); this.tabCon = $(".con li"); this.next = $(".next"); this.len = this.tabCon.length; this.curr = 0; this.init(); }; Tab.prototype = { init : function(){ var _that = this; this.isShow(); this.next.bind("click",function(){ _that.curr++; _that.changeCon(_that.curr); }); this.prev.bind("click",function(){ _that.curr--; _that.changeCon(_that.curr); }); this.btn.bind("click",function(){ var index = $(this).index(); _that.curr = index; _that.changeCon(index); }); }, changeCon : function(index){ this.btn.eq(index).addClass("on").siblings().removeClass("on"); this.tabCon.eq(index).show().siblings().hide(); this.curr =index; this.isShow(); }, isShow : function(){ //检查第一个的时候左箭头隐藏，最后一个的时候右箭头隐藏 if ( this.curr === 0){ this.prev.hide(); this.next.show(); }else if(this.curr == this.len-1){ this.prev.show(); this.next.hide(); }else{ this.prev.show(); this.next.show(); } } } new Tab() </script> </body> </html>