js+json用表格实现简单网站左侧导航
时间：2021-03-13 09:49:35|栏目：JavaScript代码|点击： 次
调用很简单，只要将数据组织成json格式即可：格式如下：
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/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}
整个实例代码如下：供初学者学习！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
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/"}]}
];
var nav=new tableNav("table1",data,tf);
var bautoClose=false; //打开当前导航条时其它导航条是否关闭
nav.generateNav(bautoClose);
}
整个实例代码如下：供初学者学习！
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上一篇：PHP：微信小程序 微信支付服务端集成实例详解及源码下载
栏 目：JavaScript代码
下一篇：BootStrap点击下拉菜单项后显示一个新的输入框实现代码
本文标题：js+json用表格实现简单网站左侧导航
本文地址：http://www.codeinn.net/misctech/79984.html
