javascript - Wie schreibe ich Tabs datengesteuert?

Question

Ich hoffe, Sie können über Beispiele für die Verwendung von js oder jquery anstelle von Vue und anderen Frameworks sprechen

Es tut mir leid, dass ich es nicht klargestellt habe. Ich meine damit, Daten zu verwenden, um die Aktualisierung der Benutzeroberfläche voranzutreiben, anstatt gleichzeitig die Daten und die Benutzeroberfläche zu aktualisieren, wie im Beispiel unten

    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请求数据？