用表格实现简单网站左侧导航

发布者: spid 2010年05月26日围观次点赞:1

闲暇之余，制作一用表格实现的简单的网站导航条，分享给大家。

调用很简单，只要将数据组织成json格式即可：格式如下：

window.onload = function()  {  
     var tf="if1";       var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"},  
             {sn:"搜狐体育",st:"http://sports.sohu.com/"},               {sn:"新浪体育",st:"http://sports.sina.com.cn/"}]},  
         {m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com/"},               {sn:"搜狐",st:"http://news.sohu.com/"},  
             {sn:"新浪",st:"http://news.sina.com.cn/"}]},           {m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com/"},  
             {sn:"搜狐视频",st:"http://tv.sohu.com/"},               {sn:"新浪视频",st:"http://vedio.sina.com.cn/"}]}  
        ];      var nav=new tableNav("table1",data,tf);  
    var bautoClose=false; //打开当前导航条时其它导航条是否关闭      nav.generateNav(bautoClose);  
}

原理很简单,简单解释如下,我们来看一个有6行1列的表格。
<table>

</table>

初始化时，将第1，3，5，。。。行隐藏，第2，4，6，。。行显示，然后在奇数行的点击事件中隐藏或显示其后一个偶数行，适当加一些样式及可。

整个实例代码如下：供初学者学习！

<!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> <title>山寨站长站演示</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #divtitle{ border:solid 1px #000000; width:98%; height:100px; text-align:center; } #div1{ border:solid 1px #000000; width:18%; height:700px; float:left; } #div2{ width:80%; height:700px; float:left; }  .oddrow{ margin-top:1px; } .oddrow td{ text-decoration:underline; background-color:#666666; color:#ccc; cursor:pointer; }  .evenrow{ display:none; } .evenrow a{ margin-left:10px; margin-top:2px; } .evenrow td{ background-color:#eee; display:block; } </style> <script type="text/javascript"> window.onload = function() { var tf="if1"; var data=[{m:"体育网站",s:[{sn:"百度体育",st:"http://news.baidu.com/n?cmd=1&class=sportnews"}, {sn:"搜狐体育",st:"http://sports.sohu.com"}, {sn:"新浪体育",st:"http://sports.sina.com.cn"}]}, {m:"新闻网站",s:[{sn:"百度",st:"http://news.baidu.com"}, {sn:"搜狐",st:"http://news.sohu.com"}, {sn:"新浪",st:"http://news.sina.com.cn"}]}, {m:"视频网站",s:[{sn:"百度视频",st:"http://vedio.baidu.com"}, {sn:"搜狐视频",st:"http://tv.sohu.com"}, {sn:"新浪视频",st:"http://vedio.sina.com.cn"}]} ]; var nav=new tableNav("table1",data,tf); var bautoClose=false; //打开当前导航条时其它导航条是否关闭 nav.generateNav(bautoClose); } function tableNav(tblid,data,ifname) { var tbl= document.getElementById(tblid); //1.删除表格中存在的行 for (var t = 0; t < tbl.rows.length;t++){tbl.deleteRow(t);} //2.添加数据 var idx=0; for(var t=0;t<data.length;t++) { var row=tbl.insertRow(idx); var cell=row.insertCell(0); cell.innerHTML=data[t].m; row.className="oddrow"; idx++; var row=tbl.insertRow(idx); row.className="evenrow"; var cell=row.insertCell(0); for (var i=0;i<data[t].s.length;i++) { cell.innerHTML += ""+ data[t].s[i].sn +"<br />"; } row.style.display="none"; idx++; } this.generateNav=function(bautoClose){ for (var i = 0; i < tbl.rows.length; i++) if (i % 2==0) { var obj = tbl.rows[i].getElementsByTagName("td")[0]; obj.onclick = function() { var o = this.parentNode.nextSibling; if (o.nodeType != 1) { o = o.nextSibling; } o.style.display = (o.style.display == "block") ? "none" : "block" if (bautoClose) { for (var j = 1; j < tbl.rows.length; j =j+ 2) { if (tbl.rows[j] !=o) { tbl.rows[j].style.display = "none"; } } } } } }; } </script> </head> <body > <div id="divtitle"> <h1>用表格实现简单网站左侧导航-山寨站长站</h1> </div> <div id="div1"> <table id="table1"> </table> </div> <div id="div2"> <iframe id='if1' name='if1' src="" width="100%" height="100%" border=”0″ marginwidth=”0″ marginheight=”0″ allowtransparency=”yes"></iframe> </div> </body> </html>
提示：您可以先修改部分代码再运行

顶(1)

踩(0)

【搜索相关内容】[打印] [关闭]

上一篇：CSS 鼠标经过图片滤镜灰色效果

下一篇：flash amfphp交互错误

最新评论

用表格实现简单网站左侧导航

您可能还会对下面的文章感兴趣：

相关文章