layui的tab点击事件

需求：现有（审核、调剂、复核、发药）四个操作需要不同的人去做，通过给对应的人分配权限展示想相应操作

问题：由于当前登录人的权限不能确定，tab的中的li会出现问题（只有在点击第一个li之后，后面 的li才能正常点击）

解决：使用js实现点击第一个li，找到第一个li并点击

这里用到了css的 [ 父元素:first-child ]，ul（父元素）匹配第一个li（子元素）

$('#audit-div ul :first-child').click();

代码

html：通过beetl判断是否有对应权限进行展示tab的li

<div id="audit-div" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        @if(shiro.hasPermission("/audit/review")){
        <li lay-id="review" class="layui-this">审核</li>
        @}
        @if(shiro.hasPermission("/audit/dispensing")){
        <li lay-id="dispensing">调剂</li>
        @}
        @if(shiro.hasPermission("/audit/recheck")){
        <li lay-id="recheck">复核</li>
        @}
        @if(shiro.hasPermission("/audit/dispensingDrug")){
        <li lay-id="dispensingDrug">发药</li>
        @}
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <iframe id="openTab" src="" width="100%" height="720px" frameborder="0"></iframe>
        </div>
    </div>

</div>

js：tab的点击事件判断给src赋值

layui.use(['table', 'admin', 'ax', 'func', 'laydate', 'element'], function () {
    var $ = layui.$;
    var $ax = layui.ax;
    var admin = layui.admin;
    var element = layui.element;

    element.on('tab(docDemoTabBrief)', function(data){
        var type = this.getAttribute('lay-id');
        var path = Feng.ctxPath + '/audit/goPage?type=' + type;
        if (type === 'review'){
            $('#openTab').prop("src",path)
        } else if (type === 'dispensing'){
            $('#openTab').prop("src",path)
        } else if (type === 'recheck'){
            $('#openTab').prop("src",path)
        } else if (type === 'dispensingDrug'){
            $('#openTab').prop("src",path)
        }
    });

    //点击事件:选中首个tab
    $('#audit-div ul :first-child').click();

});