<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="roots" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>Demo</title>
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
<script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
<style type="text/css">
/*
Author: Kevin Xiao
Email: kevin_218@163.com
Web:www.bluekevin.com
Msn:xiao-kevin@hotmail.com
*/
body
{
padding:50px;margin:0;
color:#666;
font:12px arial,sans-serif;
}
.tabT {width:400px;padding:0;margin:0px;background:#ddd url(http://www.bluekevin.com/demo/1.jpg) repeat-x bottom;}
.tab ,.tab li{padding:0;margin:0;border:none}
.tab{height:23px;display:block;width:400px;}
.tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
.tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-top:1px solid red;padding:2px 20px;}
.show,hidden{width:398px;margin-top:0px;border-right:1px solid red;border-bottom:1px solid red;border-left:1px solid red;border-top:0px solid #fff;text-align:left;}
.hidden{display:none;}
.show{display:block;}
.con {padding:10px;}
</style>
<script type="text/javascript" language="javascript">
<!--
function tab(tabId, tabC){
var len =document.getElementById('getId').getElementsByTagName('li').length;
for(i=1; i <= len; i++){
if ("tabId"+i==tabId){
document.getElementById(tabId).className="current";
}else{
document.getElementById("tabId"+i).className="";
}
if ("tabC"+i==tabC){
document.getElementById(tabC).className="show";
}else{
document.getElementById("tabC"+i).className="hidden";
}
}
}
//-->
</script>
</head>
<body >
<div id="getId">
<div class="tabT">
<ul class="tab">
<li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
<li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
<li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
<li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
</ul>
</div>
<div class="show" id="tabC1">
<div class="con">
1111111111111111111
</div>
</div>
<div class="hidden" id="tabC2">
<div class="con">
2
</div>
</div>
<div class="hidden" id="tabC3">
<div class="con">
3
</div>
</div>
<div class="hidden" id="tabC4">
<div class="con">
4
</div>
</div>
</div>
</body>
</html>