<!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. linux 单机跨进程通信

    一般来说通过网络通信(比如tcp,udp)或者共享内存的方式肯定可以实现跨进程通信,但现在这里要说的是比较偏但实用的几个方法:利用unix域通信(普通网络连接),利用unix域通信(socketpai ...

  2. Atitit.android webview h5运行环境总结

    Atitit.android webview h5运行环境总结 1. WebView 的使用1 2. Js调用java1 3. Js调用java 跟个swt的比较2 3.1. Swt是BrowserF ...

  3. Atitit.java swing打印功能 api  attilax总结

    Atitit.java swing打印功能 api  attilax总结 1. 打印方式有三种:2 1.1. 一是不经过任何修改,直接调用javascript中的window.print()打印.2 ...

  4. Mac系统下配置JDK及MAVEN环境变量配置

    1. 启动终端Terminal 2.进入当前用户的home目录 输入cd ~ 3.临时授权,sudo su: 输入密码(密码不显示): 4.创建.bash_profile 输入touch .bash_ ...

  5. 详解TCP建立连接全过程

    TCP是因特网中的传输层协议,使用三次握手协议建立连接,下面是TCP建立连接的全过程. 上图画出了TCP建立连接的过程.假定主机A是TCP客户端,B是服务端.最初两端的TCP进程都处于CLOSED状态 ...

  6. >/dev/null 2>&1的作用

    1 表示stdout标准输出,系统默认值是1,所以">/dev/null"等同于"1>/dev/null"  2 表示stderr标准错误  &am ...

  7. JavaScript之变量、作用域和内存问题

    js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...

  8. html之全局属性

    html全局属性有很多,下面说说常用的几个: 1.class 这个就不用多说了!规定类名. 2.contenteditable 规定元素是否可以编辑 语法: <element contented ...

  9. MFC invalidate和RedrawWindow区别

    Invalidate()函数是强制系统进行重画,但是不一定就马上进行重画.因为Invalidate()只是通知系统,此时的窗口已经变为无效.强制系统调用WM_PAINT,而这个消息只是Post就是将该 ...

  10. Linux下printf函数显示不同的颜色（转）

    Linux下printf函数显示不同的颜色 在学习Linux网络编程的时候做一个聊天系统,当时为了界面更漂亮点,于是搜索了下关于printf()函数的用法,给printf的输出加上些特效比如颜色,可以 ...