對應菜單對應內容選項卡

在項目的前端頁面裏，對應菜單對應內容選項卡。這種效果實現的方式有很多種，下面是使用 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();
        });
    });
}