HTML css js implements Tab page sample code
|
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:"宋体";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">Higher vocational colleges</li> <li id="menu2" onmouseover="setTab('menu',2,2)" >Private schools</li> </ul> </div> <div class="Contentbox"> <div id="con_menu_1" class="hover"> <ul> <li>·<a href="#">Beijing Industrial Vocational and Technical College</a></li> <li>·<a href="#">Beijing Vocational College of Finance and Trade</a></li> <li>·<a href="#">Tianjin Vocational University</a></li> <li>·<a href="#">Dalian Vocational and Technical College</a></li> <li>·<a href="#">Liaoning Communications College</a></li> <li>·<a href="#">Zhejiang Finance Vocational College</a></li> <li>·<a href="#">Shandong Commercial Vocational and Technical College</a></li> <li>·<a href="#">Ningbo Vocational and Technical College</a></li> <li>·<a href="#">Wuhan Vocational and Technical College</a></li> </ul> </div> <div id="con_menu_2" style="display:none"> <ul> <li>·<a href="#">Jiangxi Lantian College</a></li> <li>·<a href="#">Xi'an International Studies University</a></li> <li>·<a href="#">Hunan University of International Business and Economics</a></li> <li>·<a href="#">Xi'an Translation Institute</a></li> <li>·<a href="#">Sanjiang College</a></li> <li>·<a href="#">Beijing City University</a></li> <li>·<a href="#">Huanghe Science and Technology College</a></li> <li>·<a href="#">Jilin Huaqiao Foreign Languages College</a></li> <li>·<a href="#">Zhejiang Shuren University</a></li> </ul> </div> </div> </div> </body> </html> |
<<: A brief discussion on MySQL user permission table
>>: Serial and parallel operations in JavaScript
Recommend
How to pop up a temporary QQ dialog box to chat online without adding friends
In fact, this is very simple. We add an a tag to ...
Tutorial on building a zookeeper server on Windows
Installation & Configuration The official web...
Detailed explanation based on event bubbling, event capture and event delegation
Event bubbling, event capturing, and event delega...
A brief discussion on the color matching skills of web pages (a must-read for front-end developers)
Generally speaking, the background color of a web ...
js to achieve 3D carousel effect
This article shares the specific code for impleme...
A brief discussion of four commonly used storage engines in MySQL
Introduction to four commonly used MySQL engines ...
JavaScript to implement the aircraft war game
This article shares with you how to use canvas an...
Use and understanding of MySQL triggers
Table of contents 1. What is a trigger? 2. Create...
How to handle MySQL numeric type overflow
Now, let me ask you a question. What happens when...
Example of ellipsis when CSS multi-line text overflows
Ellipses appear when multi-line text overflows Th...
Code to enable IE8 in IE7 compatibility mode
The most popular tag is IE8 Browser vendors are sc...
The whole process of implementing the summary pop-up window with Vue+Element UI
Scenario: An inspection document has n inspection...
Examples of importing and exporting MySQL table data
This article describes the import and export oper...
JavaScript imitates Xiaomi carousel effect
This article is a self-written imitation of the X...
The Linux operating system uses Python to implement the visualization function of the task manager
1. Python installation 1. Create a folder. mkdir ...