jquery的tab onmouseenter切换代码,可无限对象

原理:
把每个参数做为查找条件,即可以添加无限个.
把每个参数查找到的对象做为head(title)
然后把每个参数+'Body'对象做为body(content)绑定成一对隐/显对.
然后移动到对象时,全部body隐藏,只显示当前index的body,且除了当前的head设置class="on",其它的移除"on"

js
------------

(function (/*tabs1[, tabs2, ...]*/){
/* 对所有css 类名为 tabs1 (标题)绑定tabs1Body(内容对象)同时隐/显,可以传多个类名,每对的对应规则是tabs1[0]对应tabs1Body[0],高亮的类名为on,可以在head上放置on class达到设置默认高亮标签 */
var args = arguments;

if (!args.length) {
return alert('至少提供一个参数');
}

$(args).each(function(ii, arg){
if (!/^[a-z]\w*$/i.test(arg)) {
alert('以下class name非法跳过:' + arg);
} else {
var on = 0;
var b = $('.' + arg + 'Body');
var h = $('.' + arg);
$(h).each(function (i) {
if ($(this).hasClass('on')) {
on = 1;
$(b).eq(i).show();
} else {
$(b).eq(i).hide();
}

$(this).mouseenter(function () {
$(b).hide();
$(b).eq(i).show();
$(h).removeClass('on');
$(this).addClass('on');
});
});

if (!on) {
$(h).eq(0).addClass('on');
$(b).eq(0).show();
}
}
});
})('ind');

-----------html ---

<ul class="qu_j78y">
<li class="on head2">热点图片</li>
<li class="head2">博客视频</li>
<div class="clear"></div>
</ul>
<ul class="qu78bj head2Body">
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>

<div class="clear"></div>

</ul>
<ul class="qu78bj head2Body" style="display:none;">
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>dd活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>
<li><a href="#"><img src="images/W020120228537635239748.jpg" width="133" height="98" /><p>活动标题活动标题活动标题活动标题</p></a></li>

<div class="clear"></div>

</ul>

-------------效果---------