利用css+javascript简单的实现tab菜单的功能！其中主要是应用了事件onmouseover，当鼠标移上一个菜单项的时候触发onmouseover 事件，然后通过js的style对象改变相应的显示。我这里只是简单的将内容区域显示为菜单的名称，如果是实际应用中应该是通过ajax取得相应菜单需要 显示的内容，然后同js改变内容区域的显示内容 （document.getElementById("contentId").innerHTML="content"）。
下面我写的一个tab菜单的demo：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>tab菜单</title> <mce:style type="text/css"><!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; } ul { list-style-type: none; margin: 0; padding: 0; } ul ol { float: left; display: block; text-align: center; background-color: #CCC; border: 1px #CCC solid; margin: 0 0 0 5px; padding: 0px; width: 60px; } ul ol#tab { margin-bottom: 0px; border-bottom: 0px; background-color: #FFF; } div#content { clear: both; border-top: 0px; border-left: 1px #CCC solid; border-right: 1px #CCC solid; border-bottom: 1px #CCC solid; margin: 0px; padding: 0; width: 261px; height: 150px; } --></mce:style><style type="text/css" mce_bogus="1"> body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; } ul { list-style-type: none; margin: 0; padding: 0; } ul ol { float: left; display: block; text-align: center; background-color: #CCC; border: 1px #CCC solid; margin: 0 0 0 5px; padding: 0px; width: 60px; } ul ol#tab { margin-bottom: 0px; border-bottom: 0px; background-color: #FFF; } div#content { clear: both; border-top: 0px; border-left: 1px #CCC solid; border-right: 1px #CCC solid; border-bottom: 1px #CCC solid; margin: 0px; padding: 0; width: 261px; height: 150px; } </style> <mce:script type="text/javascript"><!-- function tabonmouseover(obj){ var ol = document.getElementsByTagName("ol"); for (i = 0; i < ol.length; i++) { ol[i].id = ""; } obj.id = "tab"; document.getElementById("content").innerHTML = obj.innerHTML; } // --></mce:script> </head> <body> <ul> <ol style="margin-left:0px;" mce_style="margin-left:0px;" onmouseover="tabonmouseover(this);" id="tab"> 新闻 </ol> <ol onmouseover="tabonmouseover(this);"> 手机 </ol> <ol onmouseover="tabonmouseover(this);"> Blog </ol> <ol onmouseover="tabonmouseover(this);"> 篮球 </ol> </ul> <div id="content"> 新闻内容 </div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>tab菜单</title> <mce:style type="text/css"><!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; } ul { list-style-type: none; margin: 0; padding: 0; } ul ol { float: left; display: block; text-align: center; background-color: #CCC; border: 1px #CCC solid; margin: 0 0 0 5px; padding: 0px; width: 60px; } ul ol#tab { margin-bottom: 0px; border-bottom: 0px; background-color: #FFF; } div#content { clear: both; border-top: 0px; border-left: 1px #CCC solid; border-right: 1px #CCC solid; border-bottom: 1px #CCC solid; margin: 0px; padding: 0; width: 261px; height: 150px; } --></mce:style><style type="text/css" mce_bogus="1"> body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; } ul { list-style-type: none; margin: 0; padding: 0; } ul ol { float: left; display: block; text-align: center; background-color: #CCC; border: 1px #CCC solid; margin: 0 0 0 5px; padding: 0px; width: 60px; } ul ol#tab { margin-bottom: 0px; border-bottom: 0px; background-color: #FFF; } div#content { clear: both; border-top: 0px; border-left: 1px #CCC solid; border-right: 1px #CCC solid; border-bottom: 1px #CCC solid; margin: 0px; padding: 0; width: 261px; height: 150px; } </style> <mce:script type="text/javascript"><!-- function tabonmouseover(obj){ var ol = document.getElementsByTagName("ol"); for (i = 0; i < ol.length; i++) { ol[i].id = ""; } obj.id = "tab"; document.getElementById("content").innerHTML = obj.innerHTML; } // --></mce:script> </head> <body> <ul> <ol style="margin-left:0px;" mce_style="margin-left:0px;" onmouseover="tabonmouseover(this);" id="tab"> 新闻 </ol> <ol onmouseover="tabonmouseover(this);"> 手机 </ol> <ol onmouseover="tabonmouseover(this);"> Blog </ol> <ol onmouseover="tabonmouseover(this);"> 篮球 </ol> </ul> <div id="content"> 新闻内容 </div> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
