jquery tab 插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
body{ margin:0; padding:0;}
ul,li{ margin:0; padding:0; list-style:none;}
.box{ width:400px; margin:0 auto;}
.box ul{ height:40px;}
.box ul li{ float:left; width:100px; color:#666; text-align:center; line-height:40px;}
.box ul li.now{ color:#F60; border-bottom:solid 2px #FF6600;}

.list{ margin-top:20px}
.list div{ color:#666;width: 200px;text-align: center;}
.list div.text{  display:none;}
</style>
</head>

<body>
<div class="box" id="box">
    <ul id="tab">
        <li>jauery</li>
        <li>html</li>
        <li>css</li>
        <li>ajax</li>
    </ul>
    <div class="list" id="list">
        <div class="text" style="display:block;">jauery</div>
        <div class="text">html</div>
        <div class="text">css</div>
        <div class="text">ajax</div>
    </div>
</div>
<script type="text/javascript">
    (function($){
        $.fn.myTab = function(options){//将对象作为参数传进去
            var defult = {parent:"",index:null};
            var setting =$.extend(defult,options);//extend方法合并两个对象,如果两个对象有相同属性,则后面的那个对象的属性覆盖前面那个对象的属性。
            $(this).find("li").on("click",function(){
                var $this=$(this);
                var $index =$this.index();
                $this.addClass("now").siblings().removeClass("now");
                $(setting.parent).children("div").eq($index).show().siblings().hide();//切换标签对应的内容


            })
            //判断进入页面显示那个标签样式和内容
            if(setting.index==null){
                $(this).find('li').eq(0).click();
            }else{
                $(this).find('li').eq(options.index).click();
            }
        }
    })(jQuery)

    $("#tab").myTab({parent:"#list",index:1})
</script>

</body>
</html>

 

posted @ 2016-11-03 09:54  异地大光码  阅读(172)  评论(0编辑  收藏  举报