不用id的选项卡html代码,一个简单的jquery选项卡例子_tabforid

一个简单的jquery选项卡例子_tabforid

一个简单的jquery选项卡例子_tabforid

$(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();

});

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;}

• 选项卡1
• 选项卡2
• 选项卡3
• 选项卡4

选项卡1 de 内容

选项卡2 de 内容

选项卡3 de 内容

选项卡4 de 内容

右一个选卡 修改了 【_tabforid='tabContentB'】 和 【id="tabContentB"】

• 选项卡1
• 选项卡2
• 选项卡3
• 选项卡4

选项卡1 de 内容

选项卡2 de 内容

选项卡3 de 内容

选项卡4 de 内容