效果图
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%;
}