前端之家收集整理的这篇文章主要介绍了
js+json 利用表格实现简单网站左侧导航的简单示例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
制作一用表格实现的简单的网站导航条,
分享给大家。这里的数据基于json格式,学习json的朋友可以参考下。
调用很简单,只要将数据组织成json格式即可:格式如下: 经测试
代码如下:
/**
* 基于json格式,用表格实现的简单的网站导航条
*
* @param
* @arrange (512.笔记) jb51.cc
**/
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/"}]}
{sn:"学堂",st:"http://jb51.cc/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}