HTML CSS JS implementation tab TAB example code

Time:2020-11-25

Copy code

The code is as follows:

<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: “song style”; 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;margin: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>
<div>
<ul>
< Li OnMouseOver = “settab (‘Menu ‘, 1,2)” > Vocational College</li>
< Li OnMouseOver = “settab (‘Menu ‘, 2,2)” > private schools</li>
</ul>
</div>
<div>
<div>
<ul>
<li>·Beijing Institute of Technology</a></li>
<li>·Beijing Vocational College of Finance and trade</a></li>
<li>·Tianjin Vocational University</a></li>
<li>·Dalian Vocational and Technical College</a></li>
<li>·Liaoning Communications College</a></li>
<li>·Zhejiang Vocational College of Finance</a></li>
<li>·< a http: / / ා”> Shandong Vocational and Technical College of Commerce</a></li>
<li>·< a http: / / www.ningbo vocational and Technical College</a></li>
<li>·Wuhan vocational and Technical College</a></li>
</ul>
</div>
<div style=”display:none”>
<ul>
<li>·< a Ref. “> Jiangxi Lantian University</a></li>
<li>·Xi’an Foreign Affairs University</a></li>
<li>·Hunan University of foreign economics</a></li>
<li>·Xi’an Institute of translation</a></li>
<li>·Sanjiang University</a></li>
<li>·Beijing City University</a></li>
<li>·Huanghe University of science and technology</a></li>
<li>·Jilin Huaqiao Foreign Language College</a></li>
<li>·Zhejiang Shuren University</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>