javascript - 如何用数据驱动的方式写tab选项卡?
黄舟
黄舟 2017-07-05 10:38:32
0
2
2928

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

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复 (2)
伊谢尔伦

楼主说的显示区域只有一个,只是根据上面的选项来重新生成加载数据在该显示区域?如果是这样子的话,其实就是点击选项的时候,先清空显示区域,再调用对应的数据并生成对应的样子然后添加到该显示区域就可以了

    巴扎黑

    数据驱动?你的意思是点击tab的时候动态ajax请求数据?

      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!