闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于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. Singular value encountered in calculation for ROI

    在ENVI中对一幅TM影像进行监督分类,在进行compute ROI separability时提示Singular value encountered in calculation for ROI, ...

  2. Python编程-基础知识-条件判断

    1. 简单的if/else条件判断 judge_flow.py name = input("Please input name: ") if name == 'master': p ...

  3. android模拟器使用gps定位

    在模拟器上获取GPS信息时,使用Location loc = LocationManager.getLastKnownLocation("gps");来获取location信息,但 ...

  4. php之快速入门学习-18(PHP 面向对象)

    PHP 面向对象 在面向对象的程序设计(英语:Object-oriented programming,缩写:OOP)中,对象是一个由信息及对信息进行处理的描述所组成的整体,是对现实世界的抽象. 在现实 ...

  5. LeetCode 37 Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows: 1, 11, 21, 1211, 111221 ...

  6. 【转】javascript中值传递,地址传递,引用传递的问题(使用js创建list对象时会用到)

    function initEditModal_SI(node) { if (node.siArray == undefined) { node.siArray = new Object(); } va ...

  7. html 链接外部css js文件

    <link rel="stylesheet" type="text/css" href/style.css" />    <scri ...

  8. java 在控制台上输入密码时,密码不显示在控制台上

    用下面的方法可以实现在控制台上输入密码时,密码不显示在控制台上:Console cons=System.console(); System.out.print(" 密码:"); c ...

  9. 使用openssl进行证书格式转换

    各类证书由于存储的内容不同(如是否包含公钥/私钥是否加密存储/单一证书或多证书等).采用编 码不同(DER/BASE64).标准不同(如PEM/PKCS),所以尽管X.509标准规定了证书内容规范,但 ...

  10. ArchLinux新版本(pacstrap安装)及国内较优源推荐

    下载安装镜像和配置虚拟机都略过. 进入安装模式以后第一件事是要进行分区,分区很重要,怎么分区是由后面的grub的模式来决定的.grub有3种模式,分别对应grub-bios-gpt,grub-bios ...