<!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>