<!DOCTYPE html>
<html lang="en">
<head>
<title>tab切换</title>
<style type="text/css">
body {
font: "宋体";
font-size: 12px;
}
a:link, a:visited {
font-size: 12px;
color: #666;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
#Tab {
margin: 0 auto;
width: 454px;
height: 450px;
border: 1px solid #29576B;
}
.Menubox {
height: 40px;
}
.Menubox ul {
list-style: none;
margin: 0px 0px;
padding: 0;
position: absolute;
}
.Menubox ul li {
height: 30px;
float: left;
background: #29576B;
line-height: 20px;
display: block;
cursor: pointer;
width: 150px;
text-align: center;
color: #fff;
font-weight: bold;
border-top: 1px solid #29576B;
border-left: 1px solid #fff;
border-right: 0px solid #fff;
border-bottom: 1px solid #fff;
}
.Menubox ul li.hover {
height: 30px;
background: #fff;
border-bottom: 1px solid #fff;
color: #29576B;
}
.Contentbox {
clear: both;
margin-top: 0px;
border-top: none;
height: 181px;
padding-top: 8px;
height: 100%;
}
.Contentbox ul {
list-style: none;
margin: 7px;
padding: 0;
}
.Contentbox ul li {
line-height: 24px;
border-bottom: 1px dotted #ccc;
}
</style>
<script>
function setTab(name, cursel, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = i == cursel ? "hover" : "";
con.style.display = i == cursel ? "block" : "none";
}
}
</script>
</head>
<body>
<div id="Tab">
<div class="Menubox">
<ul>
<li id="menu1" onmouseover="setTab('menu',1,3)" class="hover">今日热搜</li>
<li id="menu2" onmouseover="setTab('menu',2,3)">今日热帖</li>
<li id="menu3" onmouseover="setTab('menu',3,3)">国际新闻</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_menu_1" class="hover">
这里是今日热搜
</div>
<div id="con_menu_2" style="display:none">
这里是今日热帖
</div>
<div id="con_menu_3" style="display:none">
这里是国际新闻
</div>
</div>
</div>
</body>
</html>
tab框切换简易版
最新推荐文章于 2022-10-18 17:07:18 发布