layui里的选项卡我只想点击哪个就加载哪个页面怎么做

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this" style="width:100px">基本信息</li>
    <li style="width:100px">学员管理</li>
    <li style="width:100px">考勤统计</li>
    <li style="width:100px">成绩管理</li>
    <li style="width:100px">回访管理</li>
    <li style="width:100px">课表管理</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 class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
    <div class="layui-tab-item">内容6</div>
  </div>
</div>
 
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>

现在这种情况是直接加载完了吧

是加载还是显示，如果是显示，你先给各个模块加上id，然后在window.onload()给指各个模块id设置display属性，点击之后显示就可以了

element.tabChange(filter, layid); 用于外部切换到指定的Tab项上，参数同上，如：
element.tabChange('demo', 'layid'); //切换到 lay-id="yyy" 的这一项

可以看看官网文档里面。
其中filter 在layui-tab里面加上一个属性 lay-filter="demo" 这个fileter就写'demo' 然后给每个选项卡加上 lay-id项。
监听选项卡的变化。