闲暇之余,制作一用表格实现的简单的网站导航条,分享给大家。这里的数据基于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. 微信小程序开发者工具下载地址

    下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

  2. libcurl库进行http通讯-开篇

    从今天開始介绍一些经常使用的库. 首先就来写一写关于libcurl库. libcurl主要功能就是用不同的协议连接和沟通不同的server~也就是相当封装了的sockPHP 支持libcurl(同意你 ...

  3. ES6 async await 面试题

    转自:https://juejin.im/post/5c0397186fb9a049b5068e54 1.题目一 async function async1(){ console.log('async ...

  4. vue源码cached高阶函数解析

    1.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  5. Java 提示“找不到或无法加载主类” 解决方法

    1.检查环境变量配置,我的安装路径是F:\java\jdk1.8.0_91,因为是6以上版本,故不需配置Classpath 否则 CLASSPATH=.;%JAVA_HOME%\lib\dt.jar; ...

  6. 解决 /dev/mapper/* 100%

    1.查看大文件位置du -sh /* | sort -nr 2.分析,处理文件

  7. 【Docker】拉取Oracle 11g镜像配置

    以下是基于阿里云服务器Centos 7操作 1.拉取Oracle11g镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_1 ...

  8. xml 及其语法

    先说一些关于框架,开发中的框架,主要是用反射技术来封装数据. 先指定规范写出xml,然后通过读写流技术封装好一些API用来映射xml文件,方便取得xml中的配置信息.取得xml内容就可以通过取得的内容 ...

  9. 使用任务Task 简化异步编程

    使用任务简化异步编程 Igor Ostrovsky 下载代码示例 异步编程是实现与程序其余部分并发运行的较大开销操作的一组技术. 常出现异步编程的一个领域是有图形化 UI 的程序环境:当开销较大的操作 ...

  10. 【laravel5.4】中jquery的post Ajax提交

    1.post的ajax需要提交csrf_token字段,进行安全过滤 <meta name="csrf-token" content="{{ csrf_token( ...