javascript - How to write tabs in a data-driven way?

Question

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(){
            //    点击tab导航，触发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导航
                $(".oa-tab-nav").eq(lastIndex).removeClass('active');
                $(".oa-tab-nav").eq(index).addClass('active');
                //    更新tab内容
                $(".oa-tab-item").eq(lastIndex).removeClass('active');
                $(".oa-tab-item").eq(index).addClass('active');
                lastIndex = index;
            });
            //    初始化触发
            $(".oa-tab").trigger("tab.switch", 0);
        };
    })();


    tabSwitch();

Answer 1

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

Answer 2

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