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();
問題解答
回答1:樓主說的顯示區域只有一個,只是根據上面的選項來重新生成加載數據在該顯示區域?如果是這樣子的話,其實就是點擊選項的時候,先清空顯示區域,再調用對應的數據并生成對應的樣子然后添加到該顯示區域就可以了
回答2:數據驅動?你的意思是點擊tab的時候動態ajax請求數據?
相關文章:
1. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。2. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變3. html5 - 有可以一次性把所有 css外部樣式轉為html標簽內style=" "的方法嗎?4. javascript - 有什么比較好的網頁版shell前端組件?5. java - 如何寫一個intellij-idea插件,實現編譯時修改源代碼的目的6. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?7. java 中Long 類型如何轉換成Double?8. javascript - 求解答:實例對象調用constructor,此時constructor內的this的指向?9. html - vue項目中用到了elementUI問題10. javascript - [js]為什么畫布里不出現圖片呢?在線等
