1.写这篇文章的目的，就是把自己学习的东西记录下来。学习jquery有几个月了，一直都没有接触jquery插件这一块。今天想学习一下。 这是我自己动手写的一个jquery插件，简单之极。可能是连一点起码得实际作用都没有，仅仅作为自己的联系代码而已。如果有什么不足的地方，希望各路高手批评指正，一起进步。 1. 这是HTML 代码，包含一些CSS!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=gb2312" />
title>无标题文档title>
script src="js/jquery-1.3.2.min.js">script>
script src="js/jquery.tab.js">script>
script>
$(document).ready(function(){
  $(".usual ul").fntab({selectedTab:"#tab2"});    
});
script>
style>
ul li{
  text-align:center;
  display:inline;
}
.usual div{
  display:none
}
.selected{
background-color:#00FFFF;
}

.other{
  background-color:#9933FF;
}
style>
head>

body>
                 div id="usual1" class="usual">
                        ul>
                            li class="init">a href="#tab1">Tab 1a>li>
                            li>a href="#tab2">Tab 2a>li>
                            li>a href="#tab3">Tab 3a>li>
                        ul>
                        div id="tab1">This is tab 1.div>
                        div id="tab2">More content in tab 2.div>
                        div id="tab3">Tab 3 is always last!div>
                 div>
body>
html>
  2.自己写的插件代码// JavaScript Document

jQuery.fn.fntab = function(params){    
  defaults = {
    selectedTab:"tab1"
  };
    
  setting =jQuery.extend(defaults,params);
  // 初始化
  $(setting.selectedTab).show();

  //添加单击事件
  $("li a",this).click(function(){
                
              var    tabId = $(this).attr("href");
              // 层的显示和隐藏
              $(tabId).show();
              $(tabId).siblings("div").hide();                
              //tab class属性的切换
              $("#"+tabId).parent().removeClass("other").addClass("selected");
                
            });
}
  效果：实现简单的tab 页面切换。