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>

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