tab切换导航内容制作

来源：互联网发布：糠秕孢子菌毛囊炎知乎编辑：程序博客网时间：2024/05/17 07:38

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.效果图：

0 0