tab页选项卡切换效果-蒲公英云

tab页选项卡切换效果

た入场券 2022-01-07 06:43 537阅读 0赞

效果图

html页面结构

<div class="tabbox" id="clicktab">
    <ul class="tabbtn">
        <li id="li0" class="current"><span>基本信息</span></li>
        <li id="li1"><span>li1</span></li>
        <li id="li2><span>li2</span></li>
    </ul>
    <div class="tabcon">
        <form id="form" role="form" autocomplete="off">
            <%-->这里是form内容<--%>
        </form>
    </div>
    <div class="tabcon">
        <%-->放个iframe<--%>
        <iframe id="frame-1" src="" width='100%' height='400px'></iframe>
    </div>
    <div class="tabcon">
        <%-->随便写点什么<--%>
    </div>
</div>

// 全局变量
var clickFlag1 = false;
var clickFlag2 = false;
$(function(){ 
    //切换table页面
    selectTabbtn();
})
function selectTabbtn(){ 
    //选项卡鼠标点击事件
     $('#clicktab .tabbtn li').click(function(){ 
        TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
    });
    $('#clicktab .tabbtn #li1').click(function(){ 
        if(!clickFlag1){ 
            // 加载页面业务逻辑
            /*业务逻辑*/
            $("#frame-2").prop("src","");
            clickFlag1 = true; // 再次点击选项卡时，不再重新加载页面
        }
        //当前选项卡对应页面展示
        TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this));
    });
    $('#clicktab .tabbtn #li2').click(function(){ 
        if(!clickFlag2){ 
            // 加载业务逻辑页面
            clickFlag2 = true; // 再次点击选项卡时，不再重新加载页面
        }
        TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this));
    });
    $('#clicktab .tabbtn li').eq(0).trigger("click"); //默认展示第一个选项卡页面
}
//显示被点击的选项卡对应页面
function TabSelect(tab,con,addClass,obj){ 
    //被点击的选项卡
    var $_self = obj;
    //所有选项卡
    var $_nav = $(tab);
    $_nav.removeClass(addClass);
    $_self.addClass(addClass);
    //被点击选项卡的序号
    var $_index = $_nav.index($_self);
    //所有的内容项
    var $_con = $(con);
    $_con.hide();
    $_con.eq($_index).show();
}

参考css样式

ul li { 
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* tabbox */
.tabbox { 
    width: 100%;
    overflow: hidden;
    float: left;
}
.tabbox .tabbtn { 
    width: 100%;
    background: #f1f1f1;
    height: 31px;
    margin-left: 0;
    border-bottom: solid 1px #ddd;
    margin-bottom: 0
}
.tabbox .tabbtn li { 
    float: left;
    position: relative;
    margin: 0 0 0 -1px;
    border: solid 1px #ddd;
    border-top: none;
    background: #f1f1f1;
}
.tabbox .tabbtn li a, .tabbox .tabbtn li span { 
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    width: 116px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}
.tabbox .tabbtn li.current { 
    border-bottom: none;
    border-top: none;
}
.tabbox .tabbtn li.current a, .tabbox .tabbtn li.current span { 
    border-top: solid 3px #f3b970;
    height: 31px;
    line-height: 31px;
    background: #fff;
    color: #f3b970;
    font-weight: 800;
}
.tabbox .tabcon { 
    width: 100%;
}