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 convert rows to columns in MySQL
MySQL row to column operation The so-called row-t...
Using Zabbix to monitor the operation process of Oracle table space
0. Overview Zabbix is an extremely powerful ope...
Basic steps to use Mysql SSH tunnel connection
Preface For security reasons, the root user of My...
A tutorial for beginners to install and log in to mysql-8.0.19-winx64 (must-read for beginners)
Table of contents 1. Download the installation pa...
VMware's detailed tutorial on how to create a Linux virtual machine and set up a virtual machine network
How to create a Linux virtual machine in VMware a...
Detailed explanation of how to migrate a MySQL database to another machine
1. First find the Data file on the migration serv...
A brief discussion on the lock range of MySQL next-key lock
Preface One day, I was suddenly asked about MySQL...
Flex layout realizes the layout mode of upper and lower fixed and middle sliding
This article mainly introduces the layout method ...
How to install Tomcat-8.5.39 on centos7.6
Here is how to install Tomcat-8.5.39 on centos7.6...
How to redirect to https through nginx load balancing
Copy the certificate and key on the web scp -rp -...
Linux sar command usage and code example analysis
1. CPU utilization sar -p (view all day) sar -u 1...
Detailed tutorial on jdk installation and environment variable configuration under Win10
Table of contents Preface 1. Preparation 2. Insta...
Compatibility issues when inserting audio files in HTML and playing them in browsers
Let's talk about some problems I have encounte...
How to understand the difference between ref toRef and toRefs in Vue3
Table of contents 1. Basics 1.ref 2. toRef 3. toR...
Step by step guide to build a calendar component with React
Table of contents Business Background Using Techn...