<!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实现前端简单路由的更多相关文章

  1. 用javascript来实现前端简单路由

    WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由.后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁.同样 ...

  2. echart封装，前端简单路由，图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  3. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  4. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  5. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  6. JavaScript学习笔记（一）：介绍JavaScript的一些简单知识

    JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...

  7. 【Android进阶】Android程序与JavaScript之间的简单调用

    本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...

  8. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  9. JavaScript 日期格式化 简单有用

    JavaScript 日期格式化 简单有用 代码例如以下,引入jquery后直接后增加下面代码刷新可測试 Date.prototype.Format = function (fmt) { //auth ...

随机推荐

  1. SQLite学习笔记(七)&&事务处理

    说到事务一定会提到ACID,所谓事务的原子性,一致性,隔离性和持久性.对于一个数据库而言,通常通过并发控制和故障恢复手段来保证事务在正常和异常情况下的ACID特性.sqlite也不例外,虽然简单,依然 ...

  2. Python基础之面向对象

    一.面向对象概述 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 面向过程 ...

  3. 鼠标 mouseover和mouseout事件

    在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...

  4. 虚基类&虚继承

    发现这个月准备竞赛完全没有更新哎... 改了下某华大一c++测试题...网上对虚继承讲的要么太繁琐要么不到位,自力更生 #include<iostream> #include<fst ...

  5. COGS 265线段覆盖[线段树]

    265. 线段覆盖 ★★☆   输入文件:xdfg.in   输出文件:xdfg.out   简单对比时间限制:2 s   内存限制:20 MB [问题描述] 有一根长度为 L 的白色条状物.有两种操 ...

  6. 第50课 关于对话框(About)

    1. 关于对话框 (1)标准的桌面应用软件都有一个关于对话框 (2)关于对话框用于标识软件自身的信息.如logo.项目名.版本号.开发者信息.版权信息.联系方式等. 2. 经典设计方案 3. 项目持续 ...

  7. log4j.properties配置

    一.日志:除了能记录异常信息,还可以记录程序正常运行时的关键信息. 使用log4j来进行日志文件记录经典步骤: 01.在项目中创建一个lib文件夹,然后将下载好的jar包copy到该文件夹下 02.对 ...

  8. jdbc java数据库连接 3）Statement接口之执行DDL、DML、DQL

    |- Statement接口: 用于执行静态的sql语句 |- int executeUpdate(String sql)  : 执行静态的更新sql语句(DDL,DML) |- ResultSet ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 更优美的Oracle数据库上的代码生成器

    代码生成器进行了改进,针对Oracle数据库生成更优美的代码.这样生成出来的代码,更像微软的风格,更像C#.NET的标准规范,阅读起来也更优美.把Oracle表字段名默认大写, 有_分割等进行了优化, ...

  10. 上海闪酷成为京东商城第一批独立软件开发商(ISV)

    闪酷信息技术(上海)有限公司一直致力于为品牌企业提供电子商务软件及其服务,为其拓展电商渠道保驾护航.上海闪酷依据多年的行业经验和技术积累,与中国 最大的B2C商城达成战略合作,为其2万多家品牌供应商提 ...