ID控制tab切换
用ID的方法控制一下tab切换，感觉效果很好，代码也很简单。
上次的有点问题，今天改进了一下，用插件的形式写的。
代码如下：
<!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>ID控制tab切换 jQuery</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.tab=function(options) {
var defaultSettings={
className: "",
event: ""
}
var s=$.extend(defaultSettings,options);
return this.each(function() {
var length = $(this).find("a").length-1;
var className = $("."+s.className);
if(className.length>1) {
className.hide();
className.eq(length).show();
}else {
className.eq(0).show();
}
$(this).find("a").eq(length).addClass("on");
$(this).find("a").bind(s.event,function() {
var node = $(this).attr("href").slice(1);
$("."+s.className).hide();
$("#"+node).show();
$(this).parent().find("a").removeAttr("class");
$(this).addClass("on");
return false;
});
})
}
})(jQuery)
$(function(){
$("p").tab({
className: "context",
event: "click"
});
})
</script>
<style type="text/css">
.on {
color: #f00;
}
</style>
</head>
<body>
<p><a href="#red">红色背景</a><a href="#green">绿色背景</a><a href="#black">黑色背景</a></p>
<div id="red" class="context">红色背景红色背景红色背景红色背景</div>
<div id="green" class="context">绿色背景绿色背景绿色背景绿色背景绿色背景</div>
<div id="black" class="context">黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景</div>
<div class="context">黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ID控制tab切换 jQuery</title>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.tab=function(options) {
var defaultSettings={
className: "",
event: ""
}
var s=$.extend(defaultSettings,options);
return this.each(function() {
var length = $(this).find("a").length-1;
var className = $("."+s.className);
if(className.length>1) {
className.hide();
className.eq(length).show();
}else {
className.eq(0).show();
}
$(this).find("a").eq(length).addClass("on");
$(this).find("a").bind(s.event,function() {
var node = $(this).attr("href").slice(1);
$("."+s.className).hide();
$("#"+node).show();
$(this).parent().find("a").removeAttr("class");
$(this).addClass("on");
return false;
});
})
}
})(jQuery)
$(function(){
$("p").tab({
className: "context",
event: "click"
});
})
</script>
<style type="text/css">
.on {
color: #f00;
}
</style>
</head>
<body>
<p><a href="#red">红色背景</a><a href="#green">绿色背景</a><a href="#black">黑色背景</a></p>
<div id="red" class="context">红色背景红色背景红色背景红色背景</div>
<div id="green" class="context">绿色背景绿色背景绿色背景绿色背景绿色背景</div>
<div id="black" class="context">黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景</div>
<div class="context">黑色背景黑色背景黑色背景黑色背景黑色背景黑色背景</div>
</body>
</html>
P.S: Tab切换的内容最好用一个div包起来，否者会出问题的
