首页 / 脚本样式 / JavaScript / 基于Jquery的简单&简陋Tabs插件代码

HTML代码
复制代码 代码如下:
<div class="tab">
<li class="selected" >1</li>
<li class="hover">2</li>
<li class="hover">3</li>
</div>
<div class="tab_box">
<div class="newslist">第一个</div>
<div class="newslist">第二个</div>
<div class="newslist">第三个</div>
</div>

Jquery
复制代码 代码如下:
$（）.PPXTabs（{ nav:".tab li",nav_txt:".tab_box div",selectedClass:"selected",hoverClass:"hover"}）;

jquery.PPXTabs.js代码
复制代码 代码如下:
/*    ================================================================
*    Copyright 2009 PPX
*    邮箱:    Mr.cuix@Gmail.com
*    原始版本作者:PPX 创建时间:2010-2-8 10:20
*    ================================================================
*    参数说明
*    <param name="nav">导航列</param>
*    <param name="nav_txt">导航内容</param>
*    <param name="selectedClass">选中时的样式</param>
*    <param name="hoverClass">经过时的样式</param>
*
*    默认为
*    $（）.PPXTabs（{
                nav:".news_title1 li",
                nav_txt:".news_list_box div",
                selectedClass:"tab_1_A",
                hoverClass:"tab_1_B"
                }）;
    ===================================
    Demo
    -----
    <div class="tab">
        <li class="selected" >1</li>
        <li class="hover">2</li>
        <li class="hover">3</li>
    </div>
    <div class="tab_box">
        <div class="newslist">第一个</div>
        <div class="newslist">第二个</div>
        <div class="newslist">第三个</div>
    </div>
    ===================================
    css
    -----
    $（）.PPXTabs（{ nav:".tab li",nav_txt:".tab_box div",selectedClass:"selected",hoverClass:"hover"}）;
*/

$.fn.PPXTabs=function（options）{
        //默认配置
        var settings={
             nav:".news_title1 li",
             nav_txt:".news_list_box div",
             selectedClass:"tab_1_A",
             hoverClass:"tab_1_B"
        };
        //主函数
        $（function（）{
            var tab_menu_li = $（settings.nav）;
            $（settings.nav_txt+":gt（0）"）.hide（）;

            tab_menu_li.hover（function（）{
                //鼠标移入
                $（this）.removeClass（settings.hoverClass）;
                $（this）.siblings（）.find（"."+settings.selectedClass）.removeClass（settings.selectedClass）;
                $（this）.siblings（"li"）.addClass（settings.hoverClass）;
                $（this）.addClass（settings.selectedClass）;
                var index = tab_menu_li.index（this）;
                $（settings.nav_txt）.eq（index）.show（）.siblings（）.hide（）;
            },function（）{
                //鼠标移出
                $（this）.removeClass（settings.selectedClass）;
                $（this）.siblings（）.find（"."+settings.selectedClass）.removeClass（settings.selectedClass）;
                $（this）.siblings（"li"）.addClass（settings.hoverClass）;
                $（this）.addClass（settings.selectedClass）;

            }）;

        }）;
        if（options）{
            $.extend（settings,options）;
        }

    
    };