layui中的Tab选项操作外部元素

2020-02-10

前端

最近用到layui中的Tab选项卡切换，挺好用的，但是遇到了要控制外部元素跟着变动着，仔细研究了下文档。在https://www.layui.com/doc/modules/element.html 这个文档中，element.on(filter, callback) 可以用来监听元素，然后在回调函数中，就可以操控想要的外部元素了。比如：

<div class="layui-tab" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>控制外部元素</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
  </div>
</div>
/*下面是外部元素*/
<div id="wbys">
XXXXX
</div>

这里JS可以写

layui.use('element', function(){
  var element = layui.element;
  
  //一些事件监听
  element.on('tab(demo)', function(data){
	if(data.index==1){
		//当点击到第二个li时，即控制外部元素的那个Li
		 这里就是你自己要操作的JS
	}
   
  });
});