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