闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于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. 以Settings.APPLICATION_DEVELOPMENT_SETTINGS打开开发人员面板出错总结

    近期遇到了一个问题,感觉须要记录一下. 要打开开发人员面板,之前的代码例如以下: Intent intent = new Intent(Settings.ACTION_APPLICATION_DEVE ...

  2. CATransition 动画处理视图切换

    一:引入包和头文件:   需要在frameworks中添加QuartzCore.framework 在接口程序中加上头文件   #import <QuartzCore/QuartzCore.h& ...

  3. wepy - 与原生有什么不同(slot插槽)

    wepy官方文档是这样介绍的 简单描述就是: index.wpy:子组件 panel.wpy:父组件 1.slot是内容分发的占位符 2.slot父组件在子组件使用时,名称必须一致 3.slot子组件 ...

  4. Android 逆向project 实践篇

    Android逆向project 实践篇 上篇给大家介绍的是基础+小Demo实践. 假设没有看过的同学能够进去看看.(逆向project 初篇) 本篇主要给大家介绍怎样反编译后改动源代码, 并打包执行 ...

  5. 算法笔记_184:历届试题 约数倍数选卡片(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 闲暇时,福尔摩斯和华生玩一个游戏: 在N张卡片上写有N个整数.两人轮流拿走一张卡片.要求下一个人拿的数字一定是前一个人拿的数字的约数或倍数 ...

  6. windows installer服务无法启动,无法打开任何msi文件

    如果不成功就在"依存关系"中找是否有其他的文件没有启用. 启用"remote procedure call(rpc)" 启用"workstation& ...

  7. POJ 1163 The Triangle DP题解

    寻找路径,动态规划法题解. 本题和Leetcode的triangle题目几乎相同一样的,本题要求的是找到最大路径和. 逆向思维.从底往上查找起就能够了. 由于从上往下能够扩展到非常多路径.而从下往上个 ...

  8. exception ORA-00923: FROM keyword not found where expected

      exception ORA-00923: FROM keyword not found where expected CreationTime--2018年8月16日10点41分 Author:M ...

  9. plsql 快捷键配置

      plsql 快捷键配置 CreateTime--2018年4月23日17:41:45 Author:Marydon 功能快捷键 预设条目 中文解释 快捷键配置Edit/Undo 撤销 ctrl+z ...

  10. 各种HTTPS站点的SSL证书 ,扩展SSL证书,密钥交换和身份验证机制汇总

    各种HTTPS站点的SSL证书 ,扩展SSL证书,密钥交换和身份验证机制汇总 一份常见的 HTTPS 站点使用的证书和数据加密技术列表,便于需要时比较参考,将持续加入新的 HTTP 站点,这里给出的信 ...