javascript - 如何用數(shù)據(jù)驅(qū)動(dòng)的方式寫tab選項(xiàng)卡？
問(wèn)題描述
希望大家講講用js或者jquery的例子，不要用vue等框架
抱歉沒有說(shuō)清楚，我的意思是用數(shù)據(jù)來(lái)驅(qū)動(dòng)Ui的更新，而不是一邊要更新數(shù)據(jù)，一遍還要跟新UI，像下面的例子
var tabSwitch = (function(){var lastIndex = 0;return function(){ // 點(diǎn)擊tab導(dǎo)航，觸發(fā)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導(dǎo)航$('.oa-tab-nav').eq(lastIndex).removeClass(’active’);$('.oa-tab-nav').eq(index).addClass(’active’);// 更新tab內(nèi)容$('.oa-tab-item').eq(lastIndex).removeClass(’active’);$('.oa-tab-item').eq(index).addClass(’active’);lastIndex = index; }); // 初始化觸發(fā) $('.oa-tab').trigger('tab.switch', 0);}; })(); tabSwitch();
問(wèn)題解答
回答1：樓主說(shuō)的顯示區(qū)域只有一個(gè)，只是根據(jù)上面的選項(xiàng)來(lái)重新生成加載數(shù)據(jù)在該顯示區(qū)域？如果是這樣子的話，其實(shí)就是點(diǎn)擊選項(xiàng)的時(shí)候，先清空顯示區(qū)域，再調(diào)用對(duì)應(yīng)的數(shù)據(jù)并生成對(duì)應(yīng)的樣子然后添加到該顯示區(qū)域就可以了
回答2：數(shù)據(jù)驅(qū)動(dòng)？你的意思是點(diǎn)擊tab的時(shí)候動(dòng)態(tài)ajax請(qǐng)求數(shù)據(jù)？
相關(guān)文章：
1. javascript - js一個(gè)call和apply的問(wèn)題?2. mysql - SQL語(yǔ)句可以提供“查詢表，并至第100條結(jié)果為止”嗎？3. python - xpath提取網(wǎng)頁(yè)路徑?jīng)]問(wèn)題，但是缺失內(nèi)容？4. Eclipse / Java-導(dǎo)入java。（namespace）。*是否有害？5. javascript - 大家都在用vue來(lái)做單頁(yè)項(xiàng)目，那vue是否可以在傳統(tǒng)多頁(yè)項(xiàng)目上？6. java中返回一個(gè)對(duì)象，和輸出對(duì)像的值，意義在哪兒7. javascript - 給某個(gè)類添加一個(gè)偽類，這個(gè)類有click事件，現(xiàn)在我點(diǎn)擊偽類也觸發(fā)了click事件8. docker不顯示端口映射呢？9. node.js - JavaScript的一個(gè)不能理解的地方10. docker images顯示的鏡像過(guò)多，狗眼被亮瞎了，怎么辦？
網(wǎng)公網(wǎng)安備