今天工作遇到個需求，就是在一個頁面中用上一步，下一步實現頁面內容的轉換，這讓我一下就想到了tab選項卡，兩者很像，只不過用來用來轉換內容的不再是上面的標籤，而且“上一步”“下一步”這樣的button。
公司用的layui 本來想修改一下，但無奈不知道如何阻止框架tab標籤的點選事件（如果有知道的大神請告訴我，不想重寫框架的JS），所以就照樣樣式自己寫了標籤，但沒有點選事件。
說下思路：
和tab一樣ul的li 對應div。通過點選“上一步”“下一步”控制標籤頁的顯示與隱藏。
JS程式碼如下

    //下一步
    function nextStep() {
        var currIndex = $(
 
'.zcyTap li').index($('.zcyTap-li-active'));
        var nextIndex = currIndex + 1 > divNum-1 ? divNum-1: currIndex + 1;
        $('.zcyTap li').eq(currIndex).removeClass('zcyTap-li-active');
        $('.zcyTap li').eq(nextIndex).addClass('zcyTap-li-active');
        $('.layui-tab-item').eq(currIndex)
 
.removeClass('layui-show');
        $('.layui-tab-item').eq(nextIndex).addClass('layui-show');
    }
    //上一步
    function prevStep(){
        var currIndex = $('.zcyTap li').index($('.zcyTap-li-active'));
        var prevIndex = currIndex - 1 < 0 ? 0: currIndex - 1;
        $('.zcyTap li').eq(currIndex)
 
.removeClass('zcyTap-li-active');
        $('.zcyTap li').eq(prevIndex).addClass('zcyTap-li-active');
        $('.layui-tab-item').eq(currIndex).removeClass('layui-show');
        $('.layui-tab-item').eq(prevIndex).addClass('layui-show');
    }

獲取當前li的index 並加上樣式addclass
將相同index的div顯示，其他隱藏。
主要用的是jquery的index()，因為對這個方法不是很熟悉，獲得的值總是-1（未找到目標返回-1）所以研究了半天，建議不熟的朋友可以先看下W3Cschool的Jquery .index() http://www.w3school.com.cn/jquery/dom_element_methods_index.asp 好好理解下在寫。