快捷導(dǎo)航

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; //打開當(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>  </head> <body > <div   class="ublnpf9mb"   id="divtitle"> <h1>用表格實(shí)現(xiàn)簡(jiǎn)單網(wǎng)站左側(cè)導(dǎo)航</h1> </div> <div   class="ublnpf9mb"   id="div1"> <table id="table1"> </table> </div> <div   class="ublnpf9mb"   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í)行]

您可能感興趣的文章: