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

更新时间：2010年04月05日 00:23:08 作者：

闲暇之余，制作一用表格实现的简单的网站导航条，分享给大家。这里的数据基于json格式，学习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> <script type="text/javascript"> window.onload = function() { var tf="if1"; var data=[{m:"脚本之家",s:[{sn:"脚本之家",st:"https://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 < tbl.rows.length;t++){tbl.deleteRow(t);} //2.添加数据 var idx=0; for(var t=0;t<data.length;t++) { var row=tbl.insertRow(idx); var cell=row.insertCell(0); cell.innerHTML=data[t].m; row.className="oddrow"; idx++; var row=tbl.insertRow(idx); row.className="evenrow"; var cell=row.insertCell(0); for (var i=0;i<data[t].s.length;i++) { cell.innerHTML += "<a href='" +data[t].s[i].st+"' target='"+ ifname +"'>"+ data[t].s[i].sn +"</a><br>"; } row.style.display="none"; idx++; } this.generateNav=function(bautoClose){ for (var i = 0; i < tbl.rows.length; i++) if (i % 2==0) { var obj = tbl.rows[i].getElementsByTagName("td")[0]; obj.onclick = function() { var o = this.parentNode.nextSibling; if (o.nodeType != 1) { o = o.nextSibling; } o.style.display = (o.style.display == "block") ? "none" : "block" if (bautoClose) { for (var j = 1; j < tbl.rows.length; j =j+ 2) { if (tbl.rows[j] !=o) { tbl.rows[j].style.display = "none"; } } } } } }; } </script> </head> <body > <div id="divtitle"> <h1>用表格实现简单网站左侧导航</h1> </div> <div id="div1"> <table id="table1"> </table> </div> <div id="div2"> <iframe id='if1' name='if1' src="" width="100%" height="100%" border="0″ marginwidth="0″ marginheight="0″ allowtransparency="yes"></iframe> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

json
导航

解读JSON的三种格式
这篇文章主要介绍了解读JSON的三种格式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
javascript 循环读取JSON数据的代码
服务端向客户端返回了一串JSON格式的数据。在有些时候，因为某些特殊的原因我们不知道原始的key值，因此我们此时无法象正常一样通过key值，来获取value值。这时我们必须循环读取JSON对象数据。废话少说，来看例子。
2010-07-07
Ajax中解析Json的两种方法对比分析
这里给大家介绍的是Ajax中解析Json的两种方法对比分析，十分的实用，本文为学习笔记，属新手文章，欢迎指教！
2015-06-06
JSON 和 JavaScript eval使用说明
JSON (JavaScript Object Notation) 一种轻量级的数据交换格式，比 XML 更轻巧，JSON 是JavaScript 原生格式，这意味着 JavaScript 中处理 JSON 数据不需要任何 API 和工具包。
2010-06-06
JSON 学习之JSON in JavaScript详细使用说明
只需要在前台页面中引入相应的javascript即可测试
2010-02-02
深入浅析同源与跨域,jsonp(函数封装),CORS原理
这篇文章主要介绍了同源与跨域,jsonp(函数封装),CORS原理，从同源政策中Ajax限制，到跨域问题以及跨域问题的解决方法帮大家更加深入的去了解其中原理
2021-08-08
js解析与序列化json数据(二)序列化探讨
上一节我们讲解了JSON.stringify()的基本用法，这一节我们来重点探讨一下序列化,单独或组合使用这两个参数(过滤器/数组)，可以更全面深入地控制JSON的序列化,感兴趣的朋友可以了解下，或许对你学习json有所帮助
2013-02-02
浅谈JSON中stringify 函数、toJosn函数和parse函数
这篇文章主要介绍了浅谈JSON中stringify 函数、toJosn函数和parse函数,需要的朋友可以参考下
2015-01-01
比较详细的关于javascript 解析json的代码
JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
2009-12-12
改进版通过Json对象实现深复制的方法
改进版通过Json对象实现深复制的方法，需要的朋友可以参考下
2012-10-10