js+json用表格實(shí)現(xiàn)簡單網(wǎng)站左側(cè)導(dǎo)航
更新時(shí)間：2010年04月05日 00:23:08 作者：
閑暇之余，制作一用表格實(shí)現(xiàn)的簡單的網(wǎng)站導(dǎo)航條，分享給大家。這里的數(shù)據(jù)基于json格式，學(xué)習(xí)json的朋友可以參考下。
調(diào)用很簡單，只要將數(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í)！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
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í)！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- 可以媲美Flash的JS導(dǎo)航菜單
- javascript實(shí)現(xiàn)的又一個(gè)不錯(cuò)的滑動(dòng)導(dǎo)航效果
- 非?？岬膉s圖形漸隱導(dǎo)航菜單欄
- 用javascript來實(shí)現(xiàn)動(dòng)畫導(dǎo)航效果的代碼
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- javascript 樹形導(dǎo)航菜單實(shí)例代碼
- js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- JS實(shí)現(xiàn)仿京東淘寶豎排二級導(dǎo)航
相關(guān)文章
這篇文章主要介紹了解讀JSON的三種格式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
javascript 循環(huán)讀取JSON數(shù)據(jù)的代碼
服務(wù)端向客戶端返回了一串JSON格式的數(shù)據(jù)。在有些時(shí)候，因?yàn)槟承┨厥獾脑蛭覀儾恢涝嫉膋ey值，因此我們此時(shí)無法象正常一樣通過key值，來獲取value值。這時(shí)我們必須循環(huán)讀取JSON對象數(shù)據(jù)。廢話少說，來看例子。2010-07-07
這里給大家介紹的是Ajax中解析Json的兩種方法對比分析，十分的實(shí)用，本文為學(xué)習(xí)筆記，屬新手文章，歡迎指教！2015-06-06
JSON (JavaScript Object Notation) 一種輕量級的數(shù)據(jù)交換格式，比 XML 更輕巧，JSON 是JavaScript 原生格式，這意味著 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何 API 和工具包。2010-06-06
JSON 學(xué)習(xí)之JSON in JavaScript詳細(xì)使用說明
只需要在前臺(tái)頁面中引入相應(yīng)的javascript即可測試2010-02-02
深入淺析同源與跨域,jsonp(函數(shù)封裝),CORS原理
這篇文章主要介紹了同源與跨域,jsonp(函數(shù)封裝),CORS原理，從同源政策中Ajax限制，到跨域問題以及跨域問題的解決方法幫大家更加深入的去了解其中原理2021-08-08
js解析與序列化json數(shù)據(jù)(二)序列化探討
上一節(jié)我們講解了JSON.stringify()的基本用法，這一節(jié)我們來重點(diǎn)探討一下序列化,單獨(dú)或組合使用這兩個(gè)參數(shù)(過濾器/數(shù)組)，可以更全面深入地控制JSON的序列化,感興趣的朋友可以了解下，或許對你學(xué)習(xí)json有所幫助2013-02-02
淺談JSON中stringify 函數(shù)、toJosn函數(shù)和parse函數(shù)
這篇文章主要介紹了淺談JSON中stringify 函數(shù)、toJosn函數(shù)和parse函數(shù),需要的朋友可以參考下2015-01-01
比較詳細(xì)的關(guān)于javascript 解析json的代碼
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包。2009-12-12
改進(jìn)版通過Json對象實(shí)現(xiàn)深復(fù)制的方法
改進(jìn)版通過Json對象實(shí)現(xiàn)深復(fù)制的方法，需要的朋友可以參考下2012-10-10