jQuery选项卡切换实现-优快云博客

本文介绍了一个使用jQuery实现的选项卡切换效果。该效果通过简单的HTML结构和jQuery代码实现了平滑的内容切换，并带有左右切换按钮控制。代码中包含了完整的HTML、CSS样式及jQuery交互逻辑。

<!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;width: 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;width: 10px;border-radius: 5px;background: #000;margin: 0 5px;float: left;}
.wrap  .btn li.on{background: #fff}
.wrap .con li{width: 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>