对应菜单对应内容选项卡

在项目的前端页面里，对应菜单对应内容选项卡。这种效果实现的方式有很多种，下面是使用 JQuery 实现的一种方式：

 <div class="box">
    <ul class="tabNav1">
        <li class="active">选项1</li>
        <li>选项2</li>
        <li>选项3</li>
    </ul>
    <ul class="tabCon1">
        <li>选项1内容</li>
        <li>选项2内容</li>
        <li>选项3内容</li>
    </ul>
</div>

fnTab( $('.tabNav1'), $('.tabCon1'), 'mouseover' );//鼠标移动触发
fnTab( $('.tabNav2'), $('.tabCon2'), 'click' );//点击触发
function fnTab( oNav, aCon, sEvent ) {
    var aElem = oNav.children();
    aCon.hide().eq(0).show();
    aElem.each(function (index){
        $(this).on(sEvent, function (){
            aElem.removeClass('active').addClass('gradient');
            $(this).removeClass('gradient').addClass('active');
            aCon.hide().eq( index ).show();
        });
    });
}