html css js 实现Tab标签页示例代码
导读：收集整理的这篇文章主要介绍了html css js 实现Tab标签页示例代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下: <htML XMlns=""> <head> <me...
收集整理的这篇文章主要介绍了html css js 实现Tab标签页示例代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 复制代码代码如下:
htML XMlns="">
head>
meta http-equiv="Content-tyPE" content="text/html; charset=gbk" />
meta http-equiv="Content-Language" content="zh-CN" />
meta name="roots" content="" />
meta name="Keywords" content="" />
meta name="Description" content="" />
tITle> /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:220px; border:1px solid #BCE2F3; }
.Menubox{ height:28px; border-bottom:1px solid #64B8E4; background:#E4f2FB; }
.Menubox ul{ list-style:none; mar@R_406_2848@:7px 40px; padding:0; position:absolute; }
.Menubox ul li{ float:left; background:#64B8E4; line-height:20px; display:block; cursor:pointer; width:65px; text-align:center; color:#fff; font-weight:bold; border-top:1px solid #64B8E4; border-left:1px solid #64B8E4; border-right:1px solid #64B8E4; }
.Menubox ul li.hover{ background:#fff; border-bottom:1px solid #fff; color:#147AB8; }
.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,2)" class="hover"> 高职高专/li>
li id="menu2" onmouseover="setTab('menu',2,2)" > 民办学校/li>
/ul>
/div>
div class="Contentbox">
div id="con_menu_1" class="hover">
ul>
li> ·a href="#"> 北京工业职业技术学院/a> /li>
li> ·a href="#"> 北京财贸职业学院/a> /li>
li> ·a href="#"> 天津职业大学/a> /li>
li> ·a href="#"> 大连职业技术学院/a> /li>
li> ·a href="#"> 辽宁交通高等专科学校/a> /li>
li> ·a href="#"> 浙江金融职业学院/a> /li>
li> ·a href="#"> 山东商业职业技术学院/a> /li>
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>
li> ·a href="#"> 湖南涉外经济学院/a> /li>
li> ·a href="#"> 西安翻译学院/a> /li>
li> ·a href="#"> 三江学院/a> /li>
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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html css js 实现Tab标签页示例代码
本文地址： https://pptw.com/jishu/587905.html