tab页选项卡切换效果

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

效果图  
![20190625151915714.png][]  
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%;
    }

[20190625151915714.png]: /images/20211227/1cdf59ed19a94714a1b93609ad63ac45.png