一个入门级的jQuery插件-原创手记-慕课网

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 1</a></li>
                            <li><a href="#tab2">Tab 2</a></li>
                            <li><a href="#tab3">Tab 3</a></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 页面切换。