<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>鼠標滑過，選項卡切換效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab {
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.tab-title {
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab-title ul {
position: absolute;
width: 301px;
left: -1px;
}
.tab-title li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.tab li a:link, .tab li a:visited {
text-decoration: none;
color: #000;
}
.tab li a:hover {
color: #f90;
font-weight: 700;
}
.tab-title li.select {
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
}
.tab .tab-content .tabct {
margin: 10px 10px 10px 19px;
}
.tab .tab-content .tabct ul li {
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
<script>
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if (titleName.length != tabContent.length) {
return;
}
for (var index = 0; index < titleName.length; index++) {
titleName[index].id = index;
titleName[index].onmouseover = function () {
for (var j = 0; j < titleName.length; j++) {
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
}
</script>
</head>
<body>
<div class="tab" id="tab">
<div class="tab-title" id="tab-title">
<ul>
<li class="select"><a href="#">css教程</a></li>
<li><a href="#">div教程</a></li>
<li><a href="#">js教程</a></li>
<li><a href="#">css3教程</a></li>
<li><a href="#">json教程</a></li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" style="display:block">
<ul>
<li><a href="#">地址是softwhy.com</a></li>
<li><a href="#">地址是softwhy.com</a></li>
<li><a href="#">地址是softwhy.com</a></li>
<li><a href="#">地址是softwhy.com</a></li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li><a href="#">螞蟻部落歡迎您</a></li>
<li><a href="#">螞蟻部落歡迎您</a></li>
<li><a href="#">螞蟻部落歡迎您</a></li>
<li><a href="#">螞蟻部落歡迎您</a></li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li><a href="#">努力纔會有美好的未來</a></li>
<li><a href="#">努力纔會有美好的未來</a></li>
<li><a href="#">努力纔會有美好的未來</a></li>
<li><a href="#">努力纔會有美好的未來</a></li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li><a href="#">提供免費的基礎進階教程</a></li>
<li><a href="#">提供免費的基礎進階教程</a></li>
<li><a href="#">提供免費的基礎進階教程</a></li>
<li><a href="#">提供免費的基礎進階教程</a></li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li><a href="#">本站位於青島市南區</a></li>
<li><a href="#">本站位於青島市南區</a></li>
<li><a href="#">本站位於青島市南區</a></li>
<li><a href="#">本站位於青島市南區</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
