tab键怎么上下移动_tab选项卡切换[通俗易懂]

今天工作遇到个需求，就是在一个页面中用上一步，下一步实现页面内容的转换，这让我一下就想到了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 好好理解下在写。

在网上还有一篇写的不错的文章：https://baijiahao.baidu.com/s?id=1574279809868638&wfr=spider&for=pc 写的比我工整多了0.0

今天的文章tab键怎么上下移动_tab选项卡切换[通俗易懂]分享到此就结束了，感谢您的阅读。