jQuery 选项卡插件 FengTab by FungLeo

好无聊啊，权当练手，写了一个选项卡插件

Html 结构

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

只要层级是对的，至于里面你想用啥用啥，都可以设定的。demo1是默认结构。

FengTab 插件代码

/*******************************************************************
 * @authors FengCms 
 * @web http://www.fengcms.com
 * @email [e-mail]
 * @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使用代码

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

css代码就不写了，各自发挥吧~