<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jstab标签</title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;text-decoration: none;} .main{ 298px;height: 98px;border: 1px solid #000;margin: 30px auto 0;overflow: hidden;} .tit{ 298px;overflow: hidden;background-color: #ccc} .tit ul li{float: left; 20%;height: 28px;text-align: center;line-height: 28px} .tit ul li.select{background-color: #fff} .tit ul{overflow: hidden;} .con{overflow: hidden;} .con ul li{ 298px;height: 70px;overflow: hidden;display: none;} </style> </head> <body> <div class="main" id="main"> <div id="tit" class="tit"> <ul> <li class="select">首页</li> <li>开始</li> <li>菜单</li> <li>选项</li> <li>备注</li> </ul> </div> <div id="con" class="con"> <ul> <li style="display: block;">内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> <li>内容5</li> </ul> </div> </div> <script type="text/javascript"> function $(id){ return typeof id ==='string'?document.getElementById(id):id; }; window.onload = function(){ // 获取鼠标滑过或点击的标签要和切换内容的元素 var title = $('tit').getElementsByTagName('li'); var lis = $('con').getElementsByTagName('li'); if (title.length!=lis.length) return; for(var i = 0;i<title.length;i++){ // 遍历tit下的所有li title[i].top=i; title[i].onmouseover=function(){ for (var j = 0;j<title.length;j++) { // 遍历con下的所有li title[j].className='' lis[j].style.display='none'; }; this.className="select"; lis[this.top].style.display='block'; } } } </script> </body> </html>