Javascript实现前端简单路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="javascript" />
<meta name="description" content="Helloweba演示平台,演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示:Javascript实现前端简单路由</title>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.text-right li{padding: 10px}
#result{height: 200px; line-height: 200px; font-size: 2rem; text-align: center; color:#fff;}
</style>
</head>
<body>
<div class="container"> <div class="row main" style="min-height:500px">
<div class="col-md-12">
<div class="row" style="margin-top:30px">
<div class="col-md-3">
<ul class="text-right">
<li><a href="#/">首页</a></li>
<li><a href="#/product">产品</a></li>
<li><a href="#/server">服务</a></li>
</ul>
</div>
<div class="col-md-7">
<div id="result"></div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript">
function Router(){
this.routes = {};
this.curUrl = ''; this.route = function(path, callback){
this.routes[path] = callback || function(){};
}; this.refresh = function(){
this.curUrl = location.hash.slice() || '/';
this.routes[this.curUrl]();
}; this.init = function(){
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
} } var R = new Router();
R.init();
var res = document.getElementById('result'); R.route('/', function() {
res.style.background = 'blue';
res.innerHTML = '这是首页';
});
R.route('/product', function() {
res.style.background = 'orange';
res.innerHTML = '这是产品页';
});
R.route('/server', function() {
res.style.background = 'black';
res.innerHTML = '这是服务页';
});
</script>
</body>
</html>
Javascript实现前端简单路由的更多相关文章
- 用javascript来实现前端简单路由
WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...
- echart封装,前端简单路由,图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
- JST(JavaScript Trimpath)前端模板引擎简介
JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...
- 五十行javascript代码实现简单的双向数据绑定
五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- JavaScript学习笔记(一):介绍JavaScript的一些简单知识
JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...
- 【Android进阶】Android程序与JavaScript之间的简单调用
本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- JavaScript 日期格式化 简单有用
JavaScript 日期格式化 简单有用 代码例如以下,引入jquery后直接后增加下面代码刷新可測试 Date.prototype.Format = function (fmt) { //auth ...
随机推荐
- FindBugs 入门——帮你减少代码中的bug数
FindBugs 入门 FindBugs 作用 开发人员在开发了一部分代码后,可以使用FindBugs进行代码缺陷的检查.提高代码的质量,同时也可以减少测试人员给你报的bug数. 代码缺陷分类 根据缺 ...
- Fedora 23安装配置mysql数据库,修改初始密码及登陆
下载MySQL5.7.9 yum仓库 wget http://dev.mysql.com/get/mysql57-community-release-fc23-7-noarch.rpm rpm -iv ...
- 使用 python 实现 memcached 的启动服务脚本 rc
#!/usr/bin/python #coding:utf-8 import sys import os from subprocess import Popen, PIPE class Memcac ...
- Linux下定时执行脚本(转自Decode360)
文章来自:http://www.blogjava.net/decode360/archive/2009/09/18/287743.html Decode360's Blog 老师(业精于勤而荒于嬉 ...
- 使用ansible编译安装运维工具tmux
实验系统:CentOS 6.6_x86_64 实验前提:提前准备好编译环境,防火墙和selinux都关闭 软件介绍:tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD, ...
- oracle 倒库后insert id冲突的问题
错误为:ORA-00001: unique constraint violated 把test库的数据导入到另一个库后,忘记修改自增id sequence的nextval了,因此,当前的数据库中数据和 ...
- 第4章 文本编辑器vim
1. vim常用操作 1.1 vim简介 (1)vim是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件. (2)vim没有菜单,只有命令 ...
- python Requests模块的简要介绍
Requests的安装: pip install Requests Requests的使用: import requests url = "http://www.mzitu.com" ...
- iOS重一些常用的代理模式
(一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则:开放-封闭原则实例:tableview的 数据源delegate,通过和proto ...
- [转]用Whois获得电信运营商的IP地址是如何分配的?
[转]用Whois获得电信运营商的IP地址是如何分配的? Linux下获得一些中国电信运营商的IP地址分配情况: APNIC是管理亚太地区IP地址分配的机构,它有着丰富准确的IP地址分配库,同时这些信 ...