| 标题 | 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;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 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。