一个简单的jquery选项卡例子_tabforid
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个简单的jquery选项卡例子_tabforid</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('[_tabforid] li').click(function(){
var $that = $(this);//获取当前 操作对象 （谁被点击了）
var i = $that.index(); //获取当前 对象 的 下标 （第几个被点击）
var ul = $that.parent();//获取父元素对象 为 获取 _tabforid 做准备
$that.addClass('selected');
$that.siblings('li').removeClass('selected');
//*** 拼接 选择器
$('#'+ul.attr('_tabforid')+' div').eq(i).show().siblings('div').hide();
});
//默认 每组[_tabforid] li的第一个 触发点击事件。
$('[_tabforid]').each(function(){
$(this).children('li').first().click() ;
});
//[_tabforid=tabContentA] li 第一个 触发点击事件
$('[_tabforid=tabContentA] li').eq(0).click();
});
</script>
<style>
ul,li{ list-style:none; margin:0px; padding:0px;}
.tabBox{ border:2px solid #000; width:800px; margin:0px auto 20px;}
.tabBox-title{ border-bottom:2px solid #000; }
.tabBox-title li{ background:#FFFF00; float:left; line-height:40px; width:100px; text-align:center; border-right:1px solid #000; cursor:pointer;}
/* tab 被中 状态 */
.tabBox-title li.selected { background:#f88; color:#FFFFFF;}
</style>
</head>
<body>
<div class="tabBox">
<div class="tabBox-title">
<ul _tabforid='tabContentA' >
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
</ul>
<br clear="all"/>
</div>
<div class="tabBox-body" id="tabContentA">
<div>选项卡1 de 内容</div>
<div>选项卡2 de 内容</div>
<div>选项卡3 de 内容</div>
<div>选项卡4 de 内容</div>
</div>
</div>
<center>
右一个选卡 修改了 【_tabforid='tabContentB'】 和 【id="tabContentB"】
</center>
<div class="tabBox">
<div class="tabBox-title">
<ul _tabforid='tabContentB' >
<li>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
</ul>
<br clear="all"/>
</div>
<div class="tabBox-body" id="tabContentB">
<div>选项卡1 de 内容</div>
<div>选项卡2 de 内容</div>
<div>选项卡3 de 内容</div>
<div>选项卡4 de 内容</div>
</div>
</div>
</body>
</html>