简洁选项卡Tab，点击后对应背景也会切换

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>常用简洁Tab</title>
<style type="text/css">
<!--
body{
 font:12px "宋体";
 margin:0px;
 padding:0px;
}

.Tab1{
	width:100%;
	background:#697dc6;
	float:left;
	}
.tab2{
	width:101px;
	height:65px;
	float:left;
	}	
.tab3{
	width:867px;
	float:left;
	height:65px;
	float:left;
	}		
/*菜单class*/
.Menubox {
  	height:20px;
	line-height:20px;
	margin-top:37px;
	margin-left:6px;
	}
.Menubox ul{
	margin:0px;
	padding:0px;
	list-style:none;
	}
.Menubox li{
 	float:left;
	display:block;
	cursor:pointer;
 	color:#fff;
	}
.Menubox li.hover{
  	color:#fff;
 	height:21px;
	line-height:22px;
 	margin:-2px 0 0 0;
	}
.Menubox li span.li01{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;background:#0badc9;}
.Menubox li span.li02{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 -1px 0 -1px;background:#008782;}
.Menubox li span.li03{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 -0px 0 -0px;background:#0d5c2a;}
.Menubox li span.li04{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 0px 0 -1px;background:#384685;}
.Menubox li span.li05{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 0px 0 -1px;background:#8e0409;} 
.Menubox li span.li06{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 0px 0 -1px;background:#ff9004;} 
.Menubox li span.li07{display:block;text-align:center;border:solid 1px #fff;padding:0 11px 0 11px;margin:0 -1px 0 -1px;background:#000;}
.Menubox li span:hover{
	color:#ccc;
	}
.Contentbox{
	clear:both;
	text-align:left;
 	margin-top:0px;
 	height:181px;
  	color:#000;
}
-->
</style>

<script language=javascript>

</script>

<script language=javascript>
function get_cookie(name_to_get) {
    var cookie_pair
    var cookie_name
    var cookie_value
    var cookie_array = document.cookie.split("; ")
    for (counter = 0; counter < cookie_array.length; counter++) {
        cookie_pair = cookie_array[counter].split("=")
        cookie_name = cookie_pair[0]
        cookie_value = cookie_pair[1]
        if (cookie_name == name_to_get) {
            return unescape(cookie_value)
        }
    }
    return null
}
var bg_color = get_cookie("bgColor_cookie")
function set_color(color_val) {
 set_cookie("bgColor_cookie", color_val, 365, "/")
}
function set_cookie(cookie_name, cookie_value, cookie_expire, cookie_path, cookie_domain, cookie_secure) {
    var cookie_string = cookie_name + "=" + cookie_value
    if (cookie_expire) {
        var expire_date = new Date()
        var ms_from_now = cookie_expire * 0 * 60 * 60 * 1000
        expire_date.setTime(expire_date.getTime() + ms_from_now)
        var expire_string = expire_date.toGMTString()
        cookie_string += "; expires=" + expire_string
    }
    if (cookie_path) {
        cookie_string += "; path=" + cookie_path
    }
    if (cookie_domain) {
        cookie_string += "; domain=" + cookie_domain
    }
    if (cookie_secure) {
        cookie_string += "; true"
    }
    // Set the cookie
    document.cookie = cookie_string
}
if (bg_color) {
    bb1.style.backgroundColor = bg_color
}
</script>    
</head>
<body>
     <div class="Tab1" id="bb1">
        <div class="tab2">
        </div>
        <div class="tab3">
            <div class="Menubox">
                <ul>
                   <li  id="two1" onclick="document.getElementById('bb1').style.backgroundColor='#697dc6';set_color('#697dc6');setTab('two',1,7)" class="hover">
                   <span class="li01">首页</span></li>
                   <li class="li02" id="two2" onclick="set_color('#007C8B');setTab('two',2,7);document.getElementById('bb1').style.backgroundColor='#007C8B'" >
                   <span class="li02">内容分发</span></li>
                   <li class="li03" id="two3" onclick="document.getElementById('bb1').style.backgroundColor='#02622A';set_color('#02622A');setTab('two',3,7)">
                   <span class="li03">实验室数据分析</span></li>   
                   <li class="li04" id="two4" onclick="document.getElementById('bb1').style.backgroundColor='#2a3c79';set_color('#2a3c79');setTab('two',4,7)">
                   <span class="li04">无公害农产品</span></li>
                   <li class="li05" id="two5" onclick="document.getElementById('bb1').style.backgroundColor='#860407';set_color('#860407');setTab('two',5,7)">
                   <span class="li05">电子商务</span></li>
                   <li class="li06" id="two6" onclick="setTab('two',6,7);document.getElementById('bb1').style.backgroundColor='#F79305';set_color('#F79305')">
                   <span class="li06">软件编程与实践</span></li>
                   <li class="li07" id="two7" onclick="document.getElementById('bb1').style.backgroundColor='#000';set_color('#000');setTab('two',7,7)">
                   <span class="li07">平台设置</span></li>
                </ul>
            </div>
        </div>    
    </div> 
    
    <div class="Contentbox">  
        <div id="con_two_1" class="hover"><a href="/"><img src="/images/logo.gif" border="0"></a></div>
        <div id="con_two_2" style="display:none"><center>内容分发管理的内容</center></div>
        <div id="con_two_3" style="display:none"><center>实验室数据分析</center></div>
        <div id="con_two_4" style="display:none"><center>无公害农产品认证</center></div> 
        <div id="con_two_5" style="display:none"><center>电子商务系统的内容</center></div> 
        <div id="con_two_6" style="display:none"><center>软件编程与实践的内容</center></div> 
        <div id="con_two_7" style="display:none"><center>平台设置</center></div> 
    </div>
       
 </body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

简洁选项卡Tab，点击后对应背景也会切换

分类

表格图层

描述

同样是一个选项卡，但多了一个很有趣且很实用的功能，就是当鼠标点击选项卡的任一项的时候，对应的背景也会切换，这就增加了本Tab的适用范围，会让你的网页更个性，更能满足你的布局。一位作者根据本站的一款选项卡扩展的功能，感谢奉献...