LayUI的Tab选项卡切换显示对应的页面

要实现LayUI的Tab选项卡切换显示对应的页面，可以通过以下步骤：

1. 在HTML中创建Tab选项卡的结构，例如：

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <!-- Tab1对应的页面 -->
      <iframe src="tab1.html"></iframe>
    </div>
    <div class="layui-tab-item">
      <!-- Tab2对应的页面 -->
      <iframe src="tab2.html"></iframe>
    </div>
    <div class="layui-tab-item">
      <!-- Tab3对应的页面 -->
      <iframe src="tab3.html"></iframe>
    </div>
  </div>
</div>

2. 在JavaScript中使用LayUI的Tab模块初始化Tab选项卡，例如：

layui.use('element', function(){
  var element = layui.element;
});

3. 在JavaScript中监听Tab选项卡的切换事件，并根据选项卡的索引切换显示对应的页面，例如：

element.on('tab', function(data){
  if(data.index === 0){
    // 切换到Tab1对应的页面
    $('iframe[src="tab1.html"]').show().siblings().hide();
  }else if(data.index === 1){
    // 切换到Tab2对应的页面
    $('iframe[src="tab2.html"]').show().siblings().hide();
  }else if(data.index === 2){
    // 切换到Tab3对应的页面
    $('iframe[src="tab3.html"]').show().siblings().hide();
  }
});

其中，`data.index`表示选项卡的索引，从0开始计数。根据需要，可以在每个条件分支中使用AJAX请求获取对应的页面并显示在iframe中。注意，如果页面内容不是同源的，需要在iframe中使用`sandbox`属性或者使用其他跨域请求的方法。