javascript - 如何用數(shù)據(jù)驅(qū)動(dòng)的方式寫tab選項(xiàng)卡?
問(wèn)題描述
希望大家講講用js或者jquery的例子,不要用vue等框架
抱歉沒(méi)有說(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 - webpack 報(bào)錯(cuò) 新人 求解2. nginx 80端口反向代理多個(gè)域名,怎樣隱藏端口的?3. android - NavigationView 的側(cè)滑菜單中如何保存新增項(xiàng)(通過(guò)程序添加)4. node.js - 跑antd的的模板例子!想修改端口,怎么修改呢!!(里面好像用了什么dora插件!!!)5. angular.js - angular做點(diǎn)擊購(gòu)買時(shí)的遮罩層6. angular.js - 關(guān)于ng-model和ng-bind的疑問(wèn)7. 有大佬知道這種接口文件怎么使用嗎?8. 關(guān)于thinkphp 5.1中,ajax提交數(shù)據(jù)url的格式寫法,加花括號(hào)就出錯(cuò),請(qǐng)老師指點(diǎn)9. tp5 不同控制器中的變量調(diào)用問(wèn)題10. AirPods Pro 2連接Pixel 7出問(wèn)題:播放90秒自動(dòng)斷連
