javascript - 如何用數(shù)據(jù)驅(qū)動(dòng)的方式寫tab選項(xiàng)卡?
問題描述
希望大家講講用js或者jquery的例子,不要用vue等框架
抱歉沒有說清楚,我的意思是用數(shù)據(jù)來驅(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();
問題解答
回答1:樓主說的顯示區(qū)域只有一個(gè),只是根據(jù)上面的選項(xiàng)來重新生成加載數(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. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項(xiàng)2. mysql - 表名稱前綴到底有啥用?3. sql語句 - 如何在mysql中批量添加用戶?4. 跨類調(diào)用后,找不到方法5. 編輯成功不顯示彈窗6. tp 6.0 數(shù)據(jù)查詢,求教!7. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢,查詢結(jié)果有多條,如圖。8. 為什么php修改數(shù)據(jù)無法同步到數(shù)據(jù)庫,只是當(dāng)前頁面修改成功?9. 哭遼 求大佬解答 控制器的join方法怎么轉(zhuǎn)模型方法10. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個(gè)標(biāo)簽?
