<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> ul,li{ margin:0; padding:0;} .tabBox{ 268px; margin:20px;} ul.tabTag{ height:28px;border-bottom:1px solid #000;list-style:none} ul.tabTag li{ float:left; line-height:27px; height:27px; padding:0 18px;color:#ccc; border:1px solid #ccc; border-bottom:none; margin-right:5px; background:#fff;cursor:pointer; } ul.tabTag li.active{ border-color:#000;background:#eee;color:red;position:relative;top:1px;} .tabCon{ border:1px solid #000;border-top:none;background:#fff;} .tCon{ display:none; background:#eee; padding:25px;} </style> <script type="text/javascript"> /* 函数功能：实现tab菜单 tabMenu(tabBox,navClass); 参数一：tabBox （tab容器id） 参数二：navClass （当前标签样式class） 备注：依赖指定html结构 */ function tabMenu(tabBox,navClass){ var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li"); var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div"); var tabLens=tabCon.length; for(var i=0;i<tabLens;i++){ //应用js闭包传入参数i作为当前索引值赋值给m (function(m){ tabNavLi[m].onmouseover = function(){ for(var j=0; j<tabLens; j++){ tabNavLi[j].className = (j==m)?navClass:""; tabCon[j].style.display = (j==m)?"block":""; } } })(i); } } //函数调用 window.onload=function(){ tabMenu("tabBox1","active"); tabMenu("tabBox2","active"); } </script> </head> <body> <!--demo1--> <div id="tabBox1" class="tabBox"> <ul class="tabTag"> <li class="active">新闻</li> <li>体育</li> <li>财经</li> </ul> <div class="tabCon"> <div class="tCon" style="display:block">新闻新闻新闻</div> <div class="tCon">体育体育体育</div> <div class="tCon">财经财经财经</div> </div> </div> <!--demo2--> <div id="tabBox2" class="tabBox"> <ul class="tabTag"> <li class="active">新闻</li> <li>体育</li> <li>财经</li> </ul> <div class="tabCon"> <div class="tCon" style="display:block">新闻新闻新闻</div> <div class="tCon">体育体育体育</div> <div class="tCon">财经财经财经</div> </div> </div> </body> </html>