jQuery效果之tab选项卡及jQuery插件开发

时间:2021-01-06 06:24:29

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>JQuery实例-标签页效果</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/base.css" />
  <link type="text/css" rel="stylesheet" href="css/tab.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/HDtabs.js"></script>
<script type="text/javascript">
    $(function(){
        $('#tab').HDtabs();
    })
    
</script>
 </head>
 <body>
    <div id="tab" class="tab">
        <ul>
            <li>标签1</li>
            <li class="tabin">标签2</li>
            <li>标签3</li>
        </ul>
        <div class="content">
            <div class="contentin">我是内容1</div>
            <div>我是内容2</div>
            <div>我是内容3</div>
        </div>
    </div>

 </body>
</html>


CSS

.tab ul li {
 float: left;
 background-color: #868686;
 color: white;
 padding: 5px;
 margin-right: 2px;
 border: 1px solid white;
 cursor:pointer;
}
.tab ul li.tabin {
 background-color: #6E6E6E;
 border: 1px solid #6E6E6E;
}
.tab div.content {
 clear: left;
 background-color: #6E6E6E;
 color: white;
 width: 300px;
 height: 100px;
 padding: 10px;
}
.tab div.content div{
 display: none;
}

.tab div.content .contentin {
 display: block;
}


JAVASCRIPT

(function($){
    $.fn.HDtabs=function(settings){
        settings=jQuery.extend({
            "time":300
        },settings)
        $.fn.HDtabs.show($(this),settings);
    };
    $.fn.HDtabs.show=function($this,settings){
        var t='';
        $this.children('ul').children('li').mouseover(function(){
            var _this=$(this);
            t=setTimeout(function(){
                $this.children('ul').children('li').removeClass('tabin');
                _this.addClass('tabin');
                $this.children('.content').children('div').hide();
                $this.children('.content').children('div').eq(_this.index()).show();
            },settings.time);
        });
        $this.children('ul').children('li').mouseout(function(){
            clearTimeout(t);
        });
    }
})(jQuery)