闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于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/"}]} 
{sn:"脚本学堂",st:"http://www.jbxue.com/"}]} 
]; 
var nav=new tableNav("table1",data,tf); 
var bautoClose=false; //打开当前导航条时其它导航条是否关闭 
nav.generateNav(bautoClose); 

js+json用表格实现简单网站左侧导航的更多相关文章

  1. js : json和 cookie 的简单操作

    使用 cookie,可以记录用户的最近的浏览历史 <!DOCTYPE HTML> <html lang="zh-cn"> <head> < ...

  2. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  3. js循环读取json数据,将读取到的数据用js写成表格

    ①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...

  4. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  5. [转]JS组件系列——表格组件神器:bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

  6. JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

随机推荐

  1. AIDL旅行记之开篇AIDL基本介绍

    嗨,伙伴们,计划了一周的想法最终要在这一刻实现了. 一直都想写一个博客专栏,但是总是鼓不起勇气来写.感觉自己的水量还不太够.哈哈.这次下定决心,与小伙伴们一起分享下Android中的AIDL,从此,也 ...

  2. Inception in CNN

    之前也写过GoogLeNet的笔记.但那个时候对Inception有些似懂非懂,这周又一次看了一遍,觉得有了新的体会,特地又一次写一篇博客与它再续前缘. 本文属于论文笔记性质.特此声明. Networ ...

  3. ZH奶酪:在博客中添加Latex公式

    1. 点击编辑器中的插入图片: 2.在URL输入下边的地址: http://latex.codecogs.com/gif.latex?你的latex代码 就可以了-

  4. UVA 10700 Camel trading 无括号的表达式 贪心

    题意:给出只包含数字和+*的表达式,你可以自己安排每一个运算的顺序,让你找出表达式可能得到的最大值和最小值. 很明显,先乘后加是最小值,先加后乘能得到最大值. 其实不是很明显... 证明下: 数字的范 ...

  5. tail 命令(转)

    原文:http://www.cnblogs.com/peida/archive/2012/11/07/2758084.html ail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可 ...

  6. JDBC一(web基础学习笔记七)

    一.JDBC Java数据库的连接技术(Java DataBase Connectivity),能实现Java程序以各种数据库的访问 由一组使用Java语言编写的类和接口(JDBC API)组成,它j ...

  7. E信通项目总结[转]

    http://ucd.leju.com/index.php/ouba2/    

  8. PyQt5教程——对话框(6)

    PyQt5中的对话框 对话框窗口或对话框是大多数主流GUI应用不可缺少的部分.对话是两个或更多人之间的会话.在计算机应用中,对话框是一个用来和应用对话的窗口.对话框可以用来输入数据,修改数据,改变应用 ...

  9. Win10怎么设置点击任务栏上文件夹图标直接打开“我的电脑”?

    我们都知道Win10任务栏上的文件夹图标可以打开文件资源管理器,但是点击这个图标后打开的位置却是不固定的,有可能是库文件夹,也有可能是其他常用的位置.怎么设置点击这个图标后直接打开"此电脑& ...

  10. OA项目实战学习(7)——初始化数据&amp;权限配置显示

    详细有哪些功能: 初始化数据 权限数据. 超级管理员. Installer.java package cn.xbmu.oa.install; import javax.annotation.Resou ...