如何用数据驱动的方式写tab选项卡？

Question

希望大家讲讲用js或者jquery的例子，不要用vue等框架

抱歉没有说清楚，我的意思是用数据来驱动Ui的更新，而不是一边要更新数据，一遍还要跟新UI，像下面的例子

    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

楼主说的显示区域只有一个，只是根据上面的选项来重新生成加载数据在该显示区域？如果是这样子的话，其实就是点击选项的时候，先清空显示区域，再调用对应的数据并生成对应的样子然后添加到该显示区域就可以了