javascript - 如何用數據驅動的方式寫tab選項卡？

問題描述

希望大家講講用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();

問題解答

樓主說的顯示區域只有一個，只是根據上面的選項來重新生成加載數據在該顯示區域？如果是這樣子的話，其實就是點擊選項的時候，先清空顯示區域，再調用對應的數據并生成對應的樣子然后添加到該顯示區域就可以了

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