亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - How to write tabs in a data-driven way?
黃舟
黃舟 2017-07-05 10:38:32
0
2
3197

I hope everyone can talk about examples of using js or jquery instead of vue and other frameworks

Sorry for not making it clear. What I mean is to use data to drive the update of UI, instead of updating the data and updating the UI at the same time, like the example below

    var tabSwitch = (function(){
        var lastIndex = 0;

        return function(){
            //    點(diǎn)擊tab導(dǎo)航,觸發(fā)tab切換事件
            $('.oa-tab').on("click", ".oa-tab-nav", function(e){
                var index = $(this).index();
                $(".oa-tab").trigger("tab.switch", index);
            });

            $(".oa-tab").on("tab.switch", function(e, index){
                //    更新tab導(dǎo)航
                $(".oa-tab-nav").eq(lastIndex).removeClass('active');
                $(".oa-tab-nav").eq(index).addClass('active');
                //    更新tab內(nèi)容
                $(".oa-tab-item").eq(lastIndex).removeClass('active');
                $(".oa-tab-item").eq(index).addClass('active');
                lastIndex = index;
            });
            //    初始化觸發(fā)
            $(".oa-tab").trigger("tab.switch", 0);
        };
    })();


    tabSwitch();
黃舟
黃舟

人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!

reply all(2)
伊謝爾倫

The poster mentioned that there is only one display area, and the loading data is only regenerated in that display area based on the above options? If this is the case, actually when you click on the option, you first clear the display area, then call the corresponding data and generate the corresponding appearance and then add it to the display area

巴扎黑

Data driven? Do you mean to dynamically request data via ajax when clicking a tab?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template