<!doctype html>

<html lang="en">

<body>

    <a href="#/home">首页</a>

    <a href="#/course">课程</a>

    <div id="app"></div>

    <script>

        window.onhashchange = function(){

            console.log(location.hash);

            switch (location.hash) {

                case '#/home':

                    document.getElementById('app').innerHTML = '<h2>我是首页</h2>';

                    break;

                case '#/course':

                    document.getElementById('app').innerHTML = '<h2>我是课程</h2>';

                    break;

                default:

                    // statements_def

                    break;

            }

        }

    </script>

</body>

</html>

javascript实例:路由的跳转的更多相关文章

  1. Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  2. JavaScript实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 一些有用的javascript实例分析(三)

    原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...

随机推荐

  1. NSDate相差8小时

     NSDate *date = [NSDate date]; NSTimeZone *zone = [NSTimeZone systemTimeZone]; NSInteger interval = ...

  2. Linux selinux关闭方法和防火墙关闭方法

    在Linux下设置selinux有三种方法.一.在图形界面中:    桌面-->管理-->安全级别和防火墙,设置为disable.二.在命令模式下:    修改文件:/etc/selinu ...

  3. HDU 4925 Apple Tree (瞎搞)

    找到规律,各一个种一棵树.或者施肥.先施肥,先种树一样. Apple Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 2621 ...

  4. valgrind的编译和使用

    ubuntu 平台: valgrind 3.8.1 一. 编译 ./configure --prefix=/home/frank/test/valgrind/PC/local 报错:checking ...

  5. cf #363 c

    C. Vacations time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  6. Win10 Anaconda下TensorFlow-GPU环境搭建详细教程（包含CUDA+cuDNN安装过程）（转载）

    win7(win10也适用)系统安装GPU/CPU版tensorflow Win10 Anaconda下TensorFlow-GPU环境搭建详细教程(包含CUDA+cuDNN安装过程) 目录 2.配置 ...

  7. IOS设计模式浅析之适配器模式(Adapter)

    引言 在项目开发中,有时候会遇到这样的一种情景:需要使用以前开发的“一些现存的对象”,但是新环境中要求的接口是这些现存对象所不满足的.怎样应对这种迁移的需求?使得可以复用这些对象,以满足新的应用环境, ...

  8. nagios 安装

    #!/bin/sh ################################################ #this scripts is created by oldboy #site: ...

  9. Vsphere日记02.ESXi5.5.configuration

    2.Vsphere ESXi 5.5 configuration 步骤1:启动 ESXI 服务器 步骤2:按 F2 进入用户登录界面 输入用户名及密码,进入参数设置界面.密码为我安装时候设置的&quo ...

  10. Struts2是一个基于MVC设计模式的Web应用框架

    Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互. Struts ...