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)仿京東淘寶豎排二級(jí)導(dǎo)航
相關(guān)文章
JS對象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
最近遇到這個(gè)問題，JS對象和JSON格式數(shù)據(jù)的相互轉(zhuǎn)換。其實(shí)，也就是兩個(gè)問題：JS對象轉(zhuǎn)換成為JSON格式數(shù)據(jù)、JSON格式數(shù)據(jù)轉(zhuǎn)換成為JS對象2012-02-02
json的前臺(tái)操作和后臺(tái)操作實(shí)現(xiàn)代碼
通常情況下,json的在項(xiàng)目中的應(yīng)用都是在后臺(tái)把數(shù)據(jù)傳到前臺(tái),然后前臺(tái)再獲取json中的數(shù)據(jù).2012-01-01
改進(jìn)版通過Json對象實(shí)現(xiàn)深復(fù)制的方法
改進(jìn)版通過Json對象實(shí)現(xiàn)深復(fù)制的方法，需要的朋友可以參考下2012-10-10
主要是了解一下json的簡單寫法與應(yīng)用，方便想學(xué)習(xí)json的朋友2008-08-08
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。JSON采用完全獨(dú)立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成2017-09-09
你可能已經(jīng)從這篇文章的標(biāo)題中猜到了，Internet Explorer 8（目前是Beta2）提供了原生JSON的解析和序列化。2009-04-04
JSON.parse 數(shù)據(jù)不完整的解決方法
本文主要介紹了JSON.parse 數(shù)據(jù)不完整的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了淺談JSON5解決了JSON的兩大痛點(diǎn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了10分鐘學(xué)會(huì)js處理json的常用方法,需要的朋友可以參考下2020-12-12
之前因?yàn)橐胘son，在網(wǎng)上，json Generator就不少，但是，parser鮮有后來，在一個(gè)老外的啟發(fā)下，寫了一個(gè)praser，其實(shí)超簡單，就是利用了JS的eval來parse，然后，把對象再返回給vbscript代碼。2009-12-12