调用很简单，只要将数据组织成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);
}

整个实例代码如下：供初学者学习！

simple struct

#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;
}

window.onload = function()
{
var tf="if1";
var data=[{m:"我们",s:[{sn:"我们",st:"http://www.jb51.net"},
{sn:"服务器常用软件",st:"http://s.jb51.net"},
{sn:"站长查询工具",st:"http://tools.jb51.net"}]},
{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);
}
function tableNav(tblid,data,ifname)
{
var tbl= document.getElementById(tblid);
//1.删除表格中存在的行
for (var t = 0; t "+ data[t].s[i].sn +"
";
}
row.style.display="none";
idx++;
}
this.generateNav=function(bautoClose){
for (var i = 0; i

用表格实现简单网站左侧导航

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]