jquery+css实现后台iframe多tab选项卡菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现后台iframe多tab选项卡菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<style>
body,html {
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    border-radius: 4px
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #dddee0
}

::-webkit-scrollbar-thumb:hover {
    background-color: #c7c9cc
}

.content {
    display: block;
    width: 100%;
    height: 100%
}

.content .header_box {
    height: 70px;
    border-bottom: 1px solid #f1eaea;
    display: flex;
    align-items: center;
    padding: 0 10px
}

.content .header_box span {
    font-size: 22px;
    margin-left: 20px
}

.content .content_box {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden
}

.content_box .menu {
    width: 200px;
    border-right: 1px solid #f1eaea;
    overflow-y: scroll
}

.content_box .r_content {
    width: 100%;
    flex: 1
}

.content_box .r_content .tabmenu {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #f1eaea
}

.r_content .tabmenu a {
    height: 100%;
    display: inline-block;
    padding: 0 10px;
    text-decoration: none;
    color: #232a34;
    border-right: 1px solid #f1eaea;
    font-size: 15px
}

.r_content .tabmenu a .icon {
    border-radius: 10px;
    width: 8px;
    height: 8px;
    background-color: #dddee0;
    display: inline-block
}

.r_content .tabmenu a.selected .icon {
    background-color: #4db932
}

.r_content .tabmenu a span {
    line-height: 40px;
    margin: 0 14px 0 8px
}

.r_content .tabmenu a .close {
    background: url('//repo.bfw.wiki/bfwrepo/icon/64c4c3ca079eb.png') center center;
    display: inline-block;
    width: 10px;
    height: 10px
}

.r_content .iframe iframe {
    width: 100%;
    height: 100%
}

.menu ul {
    margin: 0;
    padding: 0
}

.menu ul li {
    list-style: none
}

.menu ul li dd,.menu ul li dd dl {
    margin: 0;
    padding: 0
}

.menu a {
    text-decoration: none;
    color: #232a34;
    display: block;
    padding: 16px 20px 16px 30px;
    font-size: 15px
}

.menu a:hover,.menu .active {
    background-color: #f5f2f2
}

.menu .parent_menu {
    display: flex;
    align-items: center
}

.menu .hide {
    display: none
}

.menu .parent_menu span {
    display: block;
    width: 100%;
    flex: 1
}

.menu .parent_menu .up {
    background: url('//repo.bfw.wiki/bfwrepo/icon/64c4c39eac6c9.png') center center;
    display: inline-block;
    width: 12px;
    height: 12px
}

.menu .parent_menu .down {
    background: url('//repo.bfw.wiki/bfwrepo/icon/64c4c3aaafa6e.png') center center;
    display: inline-block;
    width: 12px;
    height: 12px
}



</style>
     <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
        <script >
            
         $(function(){
	
	var admin = {
		
		data:{
			ids:false
		},
		
		// 渲染菜单
		render:function(){
			
		},
		
		addtab:function(that){
			
			//判断是否打开 如果打开 选中这个 ； 如果没打开  打开这个并选中这个
			
			let id = that.data('id');
			let url = that.data('url');
			let name = that.children('span')[0].innerText;
			if(id=='' || url==''){
				return false;
			}
			this.selectTab(id,0);
			if(!this.data.ids){
				$('#tabmenu').find('a').removeClass();
				let html = '<a href="javascript:;" class="selected" data-id="'+id+'" data-url="'+url+'"><i class="icon"></i><span>'+name+'</span><i class="close"></i></a>'
				$('#tabmenu').append(html);
				$('#tabiframe').find('.iframe').hide();
				let iframe = '<div class="iframe if-'+id+'" data-id="'+id+'" data-url="'+url+'"><iframe src="'+url+'" frameborder="0"></iframe></div>'
				$('#tabiframe').append(iframe);
			}
		},
		
		deltab:function(id,that){
			
			let current = that.parent('a').attr('class');
			if(current == 'selected'){
				that.parent('a').prev().attr('class','selected');
				let previd = that.parent('a').prev().data('id');
				$('#tabiframe').find('.if-'+previd).show();
				console.log(that.parent('a').prev().data('id'))
				admin.selectChild(previd);
			}
			
			that.parent('a').remove();
			$('#tabiframe').find('.if-'+id).remove();
			
			
		},
		//改变父类状态
		changeParentstatus:function(that){
			this.closeParent(that);
			let status =  that.next().attr('class');
			let sticon = that.find('i').attr('class');
			status = (status == 'hide') ? 'show' : 'hide';
			that.next().attr('class',status);
			sticon = (sticon == 'up') ? 'down' : 'up';
			that.find('i').attr('class',sticon);
		},
		//关闭所有父类
		closeParent:function(that){
			that.parent().siblings().find('dd').attr('class','hide');
			that.parent().siblings().find('a i').attr('class','down');
		},
		//打开某一个父类并且选中子类  菜单
		selectChild:function(id){
			let item = $('.menu').find('a[data-id='+id+']');
			$('dd dl a').removeClass();
			let parent = item.parents('dd').siblings('.parent_menu');
			if(parent){
				let swi = parent.find('i').attr('class');
				if(swi == 'down'){
					//如果是关闭的  关闭所有  打开这个
					admin.closeParent(parent);
					item.parents('dd').attr('class','show');
					parent.find('i').attr('class','up');
				}
			}
			item.attr('class','active�.........完整代码请登录后点击上方下载按钮下载查看