<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body, div, a, h4 {
margin: 0;
padding: 0;
}
#new {
width: 300px;
height: 300px;
margin: 50px;
border: 1px solid #ccc;
font-size: 12px;
}
#title {
background: #ccc;
width: 100%;
height: 24px;
}
#show div {
display: none;
padding: 8px;
}
h4 a {
display: block;
float: left;
width: 80px;
height: 18px;
text-align: center;
padding: 6px 0 0 0;
font-weight: normal;
}
h4 a:hover {
background: #b7b7b7;
color: #fff;
}
h4.cut a {
background: #fff;
font-weight: bold;
}
h4.cut a:hover {
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div id='new'>
<div id='title'>
<h4><a href='#'>Tab1</a></h4>
<h4><a href='#'>Tab2</a></h4>
<h4><a href='#'>Tab3</a></h4>
</div>
<div id='show'>
<div class='content'>内容1</div>
<div class='content'>内容2</div>
<div class='content'>内容3</div>
</div>
</div>
<script type='text/javascript'>
(function() {
var d = document;
var Tab = function(deploy) {
var a = deploy.auto || 0,
t = deploy.trigger || '',
s = deploy.show || '',
n = deploy.name || '',
f = deploy.callback || function() {},
l = t.length || 0;
for (var i = l; i--;) {
t[i].onmouseover = function(i){
return function() {
for (var j = l; j--;) {
if (j != i) {
t[j].className = '';
s[j].style.display = 'none';
} else {
t[i].className = n;
s[i].style.display = 'block';
}
}
if (f instanceof Function) {
f.apply(this, [i]);
}
}
}(i);
}
t[a].className = n;
s[a].style.display = 'block';
}
window.Tab = Tab || {};
}) ();
Tab({
trigger : document.getElementById('title').getElementsByTagName('h4'),
show: document.getElementById('show').getElementsByTagName('div'),
name: 'cut'
});
</script>
</body>
</html>