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 页面切换。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
