js+json用表格實(shí)現(xiàn)簡(jiǎn)單網(wǎng)站左側(cè)導(dǎo)航

更新時(shí)間：2010年04月05日 00:23:08 作者：

閑暇之余，制作一用表格實(shí)現(xiàn)的簡(jiǎn)單的網(wǎng)站導(dǎo)航條，分享給大家。這里的數(shù)據(jù)基于json格式，學(xué)習(xí)json的朋友可以參考下。

調(diào)用很簡(jiǎn)單，只要將數(shù)據(jù)組織成json格式即可：格式如下：

 
window.onload = function() 
{ 
var tf="if1"; 
var data=[{m:"體育網(wǎng)站",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:"新聞網(wǎng)站",s:[{sn:"百度",st:"http://news.baidu.com/"}, 
{sn:"搜狐",st:"http://news.sohu.com/"}, 
{sn:"新浪",st:"http://news.sina.com.cn/"}]}, 
{m:"視頻網(wǎng)站",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; //打開(kāi)當(dāng)前導(dǎo)航條時(shí)其它導(dǎo)航條是否關(guān)閉 
nav.generateNav(bautoClose); 
} 

整個(gè)實(shí)例代碼如下：供初學(xué)者學(xué)習(xí)！

<!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>simple struct</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <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://www.dhdzp.com"}, {sn:"服務(wù)器常用軟件",st:"http://s.jb51.net"}, {sn:"站長(zhǎng)查詢工具",st:"http://tools.jb51.net"}]}, {m:"新聞網(wǎng)站",s:[{sn:"百度",st:"http://news.baidu.com"}, {sn:"搜狐",st:"http://news.sohu.com"}, {sn:"新浪",st:"http://news.sina.com.cn"}]}, {m:"視頻網(wǎng)站",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; //打開(kāi)當(dāng)前導(dǎo)航條時(shí)其它導(dǎo)航條是否關(guān)閉 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.添加數(shù)據(jù) 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 += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><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   class="3zdzr3b"   id="divtitle"> <h1>用表格實(shí)現(xiàn)簡(jiǎn)單網(wǎng)站左側(cè)導(dǎo)航</h1> </div> <div   class="xzb3vnh"   id="div1"> <table id="table1"> </table> </div> <div   class="n3t3xnf"   id="div2"> <iframe id='if1' name='if1' src="" width="100%" height="100%" border="0″ marginwidth="0″ marginheight="0″ allowtransparency="yes"></iframe> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: