<!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. Linux监控工具介绍系列——free

    在Linux系统中,我们查看.监控系统内存使用情况,一般最常用的命令就是free.free命令其实非常简单,参数也非常简单,但是里面很多知识点未必你都掌握了.下面总结一下我所了解的free命令.如有不 ...

  2. nodejs 使用Google浏览器进行可视化调试——Node Inspector工具

    1.npm安装Node Inspector工具,全局安装 命令行执行npm install -g node-inspector 2.启动Node Inspector工具,命令行执行 node-insp ...

  3. 【mysql】关于悲观锁

    关于mysql中的锁 在并发环境下,有可能会出现脏读(Dirty Read).不可重复读(Unrepeatable Read). 幻读(Phantom Read).更新丢失(Lost update)等 ...

  4. Linux下查找文件：which、whereis、locate、find 命令的区别

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.which       查看可执行文件的位置,通过环境变量查whereis    查看文件的位置,通过数据库查,每 ...

  5. .NET 缩略图服务器 ResizingServer

    之前写过一篇文章 .NET 响应式自动缩略图服务器 之后对此Image Server又进行了基于ImageResizer的改写 基于.NET 图片服务器 支持缩略图格式 基于 ImageResizer ...

  6. [百度经验]window下连接mysql 错误代码 1045

    连接mysql时出现错误代码 1045 Access denied for user 'root'@'localhost' (using password:YES) 百度经验:jingyan.baid ...

  7. Java基础知识笔记（二：泛型和枚举）

    1.泛型 与面向对象的多态性相类似,应用泛型可以提高程序的复用性.与多态性不同的是,应用泛型可以减少数据的类型转换,从而提高代码的运行效率.泛型实际上是通过给类或接口增加类型参数实现的.不带泛型的类的 ...

  8. Vijos1881闪烁的繁星 [线段树]

    P1881闪烁的繁星  背景 繁星闪烁着--深蓝的太空何曾听得见他们对语沉默中微光里他们深深的互相颂赞了 描述 繁星, 漫天的繁星.繁星排成一列, 我数一数呀, 一共有N只小星星呢. 星星们是听话的好 ...

  9. 基于spring-boot的rest微服务框架

    周末在家研究spring-boot,参考github上的一些开源项目,整了一个rest微服务框架,取之于民,用之于民,在github上开源了,地址如下: https://github.com/yjmy ...

  10. Multiple Contexts have a path of 错误

    1.问题描述 在eclipse里面启动tomcat的时候,看到报错,multiple contexts have a path.tomcat启动失败 2.解决办法 删除tomcat,重新加载部署tom ...