jQuery 选项卡插件 FengTab by FungLeo

Html 结构

[code]    <h2>Demo 1</h2>
    <div id="FengTab" class="FengTab">
        <ul class="tab">
            <li>Title 1</li>
            <li>Title 2</li>
            <li>Title 3</li>
            <li>Title 4</li>
        </ul>
        <div class="con">
            <div>content 1</div>
            <div>content 2</div>
            <div>content 3</div>
            <div>content 4</div>
        </div>
    </div>
    <h2>Demo 2</h2>
    <div id="FengTab2">
        <div class="caidan">
            <div>标题1</div>
            <div>标题2</div>
            <div>标题3</div>
        </div>
        <ul class="neirong">
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    </div>

FengTab 插件代码

[code]/*******************************************************************
 * @authors FengCms 
 * @web     http://www.fengcms.com  * @email   web@fengcms.com
 * @date    2015年9月4日
 * @version FengTab Beta 2.0
 * @copy    Copyright © 2013-2018 Powered by DiFang Web Studio  
 *******************************************************************/
(function($) {
    $.fn.FengTab = function(F) {
        F = $.extend({
            defaultIndex    : 0,                // 默认显示第几个，第一个为 0
            trigger         : "click",          // 交互方式，click 为 点击切换，mouseover 为鼠标碰到就切换
            Tab             : ".tab",           // 设定选项卡菜单区域 class
            TabLi           : "li",             // 设定选项卡菜单 元素
            Con             : ".con",           // 设定选项卡内容区域 class
            ConDiv          : "div",            // 设定选项卡内容 元素
            CurName         : "on",             // 设定选项卡菜单选中时 class
            showWay         : "slow"            // 设定切换方式 有 slow down 和 show 三个选项
        }, F);

        var Obj = $(this),
            Tab = Obj.find(F.Tab),
            Con = Obj.find(F.Con),
            TabLi = Tab.children(F.TabLi),
            ConDiv = Con.children(F.ConDiv);
        TabLi.each(function() {
            var T = $(this),
                I = T.index();
            if (I==F.defaultIndex){
                T.addClass(F.CurName);
            };
            T.on(F.trigger,function(){
                T.addClass(F.CurName).siblings(F.TabLi).removeClass(F.CurName);
                Action(I);
            });
        });
        ConDiv.each(function() {
            var T = $(this),
                I = T.index();
            if (I!=F.defaultIndex){
                T.hide();
            };
        });
        function Action(I) {
            switch (F.showWay) {
            case "down":
                ConDiv.stop().eq(I).slideDown(500).siblings().slideUp(500);
                break;
            case "slow":
                ConDiv.eq(I).fadeIn(200).siblings().hide();
                break;
            default:
                ConDiv.eq(I).show().siblings().hide();
            }
        };
    }
})(jQuery);

FengTab使用代码

[code]<script>
$(function(){
    $("#FengTab").FengTab();
    $("#FengTab2").FengTab({
        defaultIndex    : 2,                // 默认显示第几个，第一个为 0
        trigger         : "mouseover",          // 交互方式，click 为 点击切换，mouseover 为鼠标碰到就切换
        Tab             : ".caidan",            // 设定选项卡菜单区域 class
        TabLi           : "div",                // 设定选项卡菜单 元素
        Con             : "ul",         // 设定选项卡内容区域 class
        ConDiv          : "li",         // 设定选项卡内容 元素
        CurName         : "cur",                // 设定选项卡菜单选中时 class
        showWay         : "down"            // 设定切换方式 有 slow down 和 show 三个选项
    });
});
</script>