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

116 阅读 0 评论 77 点赞

我是靠谱客的博主不安金毛，最近开发中收集的这篇文章主要介绍js+json用表格实现简单网站左侧导航，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>simple struct</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
#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; 
} 
</style> 
 
</head> 
<body > 
<div id="divtitle"> 
<h1>用表格实现简单网站左侧导航</h1> 
</div> 
<div id="div1"> 
<table id="table1"> 
</table> 
</div> 
<div id="div2"> 
 
</div> 
</body> 
</html>

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