tab页 选项卡 切换效果

效果图

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>

js

// 全局变量
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%;
}