您的位置：首页 > 其它

tab切换导航内容制作

2015-12-16 10:30 197 查看

1. html 代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>spry tab</title>
<link rel="stylesheet" type="text/css" href="tab.css">
<script>
function settTab(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>
<br><br>
<div id="Tab">

<div class="Menubox">
<ul>
<li id="menu1" onmouseover="settTab('menu',1,3)" class="hover">高职高专</li>
<li id="menu2" onmouseover="settTab('menu',2,3)">民办学校</li>
<li id="menu3" onmouseover="settTab('menu',3,3)">清华北大</li>
</ul>
</div>

<div class="Contentbox">
<div id="con_menu_1">
<ul>
<li>.<a href="#">北京大学</a></li>
<li>.<a href="#">清华大学</a></li>
</ul>
</div>
<div id="con_menu_2" style="display: none;">
<ul>
<li>.<a href="#">北京师范大学</a></li>
<li>.<a href="#">南京大学</a></li>
</ul>
</div>
<div id="con_menu_3" style="display: none;">
<ul>
<li>.<a href="#">北京大学数学系</a></li>
<li>.<a href="#">清华大学物理学</a></li>
</ul>
</div>
</div>
</body>
</html>
2. css代码：
* {
margin: 0px;
padding: 0px;
font-size: 12px;
text-decoration: none;
}

a:link, a:hover {
color: #666;
}
a:hover {
color: #f00;
text-decoration: underline;
}

#Tab {
width: 320px;
height: 300px;
border: 1px solid #000;
margin: 0px auto;
}

.Menubox {
height: 28px;
border-bottom: 1px solid #000;
background: #fff;
}
.Menubox ul {
list-style: none;
margin: 7px 40px;
position: absolute;
}
.Menubox ul li {
width: 65px;
height: 20px;
margin-left: 0px;
background: #aaa;
color: #fff;
line-height: 20px;
text-align: center;
font-weight: bold;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
float: left;
display: block;
cursor: pointer;
/*position: relative; 默认为relative */

}
.Menubox ul li.hover {
background: #fff;
border-bottom: 1px solid #fff;
color: red;
}

.Contentbox {
width: 100%;
height: 181px;
clear: both;
padding-top: 8px;
background: #fff;
}
.Contentbox ul {
list-style: none;
margin: 7px;
}
.Contentbox ul li {
line-height: 24px;
border-bottom: 1px dotted #ccc;
}
3.效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： tab

相关文章推荐

新的分享

章节导航