javascript - 如何用資料驅動的方式寫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

樓主說的顯示區域只有一個，只是根據上面的選項來重新產生載入資料在該顯示區域？如果是這樣子的話，其實就是點擊選項的時候，先清空顯示區域，再呼叫對應的資料並產生對應的樣子然後加入到該顯示區域就可以了

Answer 2

數據驅動？你的意思是點選tab的時候動態ajax請求資料？