The call is simple, as long as the data is organized into json format: the format is as follows:
Copy codeThe Code is as follows:
Window. onload = function ()
{
Var tf = "if1 ";
Var data = [{m: "sports site", s: [{sn: "Baidu Sports", st: "http://news.baidu.com/n? Cmd = 1 & class = sportnews "},
{Sn: "Sohu Sports", st: "http://sports.sohu.com /"},
{Sn: "Sina Sports", st: "http://sports.sina.com.cn/"}]},
{M: "news website", s: [{sn: "Baidu", st: "http://news.baidu.com /"},
{Sn: "Sohu", st: "http://news.sohu.com /"},
{Sn: "Sina", st: "http://news.sina.com.cn/"}]},
{M: "video website", s: [{sn: "Baidu video", st: "http://vedio.baidu.com /"},
{Sn: "Sohu video", st: "http:// TV .sohu.com /"},
{Sn: "Sina video", st: "http://vedio.sina.com.cn/"}]}
];
Var nav = new tableNav ("table1", data, tf );
Var bautoClose = false; // whether to disable other navigation bars when the current navigation bar is opened
Nav. generateNav (bautoClose );
}
The example code is as follows!
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <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> </pead> <body> use a table to implement the left-side navigation of a simple website <table id = "table1"> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]