HTML主要代码如下
<div id="mainbox"> <!------------------第一个div-----------------------------> <div id="menu1box" class="menu1box"> <ul id="menus1" class="menu01"> <li class="hover" onmouseover="setTab(1,0)"> <a href="#"><h3>产品介绍</h3></a> </li> <li onmouseover="setTab(1,1)"> <a href="#"> <h3>新闻快讯</h3></a> </li> <li onmouseover="setTab(1,2)"> <a href="#"> <h3>科研学术</h3></a> </li> </ul> </div> <!------------------第二个div-----------------------------> <div class="main1box"> <div class="main1" id="main1"> <!------------------第一个ul-----------------------------> <ul class="block"> <li> <dl> <dd><a href="#" target="_blank">js简单实现悬浮标题时，对应的内容（图片，文字）切换 </a></dd> </dl> </li> </ul> <!------------------第二个ul-----------------------------> <ul> <li> <dl> <dd><a href="#" target="_blank">overflow 属性规定当内容溢出元素框时发生的事情 </a></dd> </dl> </li> </ul> <!------------------第三个ul-----------------------------> <ul> <li> <dl> <dd><a href="#" target="_blank">所有主流浏览器都支持 overflow 属性 </a></dd> </dl> </div> </li> </ul> </div> </div>解读 1.HTML代码主要分为两个div盒子，一个控制标题，一个控制内容的显示与遮盖 2. one： <ul id=“menus1” class=“menu01”> <li class=“hover” οnmοuseοver=“setTab(1,0)”>
two： <div class=“main1” id=“main1”> <ul class=“block”>
拓展：οnmοuseοver=" "表示 当鼠标指针移动到元素上时执行一段 JavaScript：，onmouseover 属性在鼠标指针移动到元素上时触发。 这个就是实现悬浮标题的关键
JS代码如下：
<script> function setTab(m,n){ //虽然该m可以知道是一个常数1，但是在函数中参数是不能已知的，故只能写成变量m，但是"menus"+m <=> "menus1" var tli=document.getElementById("menus"+m).getElementsByTagName("li");//控制悬浮标题的显示与遮盖 var mli=document.getElementById("main"+m).getElementsByTagName("ul");//控制悬浮标题时，对应内容的显示与遮盖 for(i=0;i<tli.length;i++){ tli[i].className=(i==n)?"hover":""; mli[i].style.display=(i==n)?"block":"none"; } } </script>解读： 1. 主要就是 var 变量名 = document.getElementById(“id”).getElementsByTagName(“元素”);————通用格式：document对象getElementsByTagName("")方法 getElementById 是通过id来获取元素，id在HTML中是唯一的，所以获取到的只有一个元素。
getElementsByTagNam 是通过标签名来获取元素，一种标签在HTML中可以有多个，所以获取到的是多个元素，且返回是以集合的形式返回。
getElementsByClassName 是通过类名来获取元素，同名的类在HTML中也能存在多个，所以获取到的也是多个元素，同样是以集合的形式返回
tli.length：获取li元素的个数
当i=n时，分别显示对应的css样式，block显示；none遮盖，不显示
CSS代码如下
*{border:0px;padding:0px;margin:0px;} body{font-size:12px;font-family:"宋体";background:#fff; margin: 0px auto} ul{list-style-type: none} li{list-style-type: none} a{text-decoration: none; color: #656464} a:hover{color:#095d40} #mainbox {overflow: hidden; margin-bottom: 20px; height: 303px; width: 328px;} .menu1box {overflow: hidden; height: 75px; position: relative;} .menu01 {height: 75px; width: 280px; position: absolute; left: 0px; z-index: 1; top: 0px;} .menu01 li {overflow: hidden; height:75px;width:93px;float: left; line-height:75px;} .menu01 li h3 {cursor: pointer; font-size: 18px; height: 46px; font-family: "微软雅黑"; width: 93px; float: left; font-weight: normal; text-align: center; margin-top: 15px; line-height: 46px;} .menu01 .hover h3 {height: 42px; width: 93px; font-weight: normal; color: #fff; text-align: center; margin-top: 15px; line-height: 42px; background-color: #0e8b61;} .main1box {overflow: hidden; width: 328px; clear: both;} .main1box ul {display: none;} .main1box ul.block {display: block;} .main1box ul li {height: 235px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px;} dl dd {background: url("images/li_bg.jpg"//一个小于号标志的png图片，可自己寻找) no-repeat left center; padding-left: 14px; margin-left: 4px; line-height: 26px;}" dl dd a {font-size: 14px; color: #4c4c4c; line-height: 30px;}解读：
根据自身需要，有些css样式可以去掉、自行修改，在这里我暂时不予修改overflow: hidden; overflow 属性规定当内容溢出元素框时发生的事情 hidden 内容会被修剪，并且其余内容是不可见的。 visible 默认值。内容不会被修剪，会呈现在元素框之外。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
设置行高line-height与高度height相等，可以使得文字，内容垂直居中对齐
特别注意：在这里的**.menu01 li h3与.menu01 .hover h3**中css样式的区别，这是为了接下来实现标题悬浮的一个伏笔。通过对第一个li元素设置一个class：hover，并添加一个background-color，使得在js代码中，用循环的方式来让.hover也进行相应的循环，从而实现该效果。 同理，内容也是如此。（具体效果自己实践可知）
说明：本人正在学习js，如有错误，请多指正！ 推荐书籍————web前端开发技术实验与实践（第3版） 本案例主要来自该书籍
