<!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. robot.txt 文件 作用和语法

    seo工作者应该不陌生,robots.txt文件是每一个搜索引擎蜘蛛到你的网站之后要寻找和访问的第一个文件,robots.txt是你对搜索引擎制定的一个如何索引你的网站的规则.通过该文件,搜索引擎就可 ...

  2. mac os x 使用scp取代sz rz

    在windows下,能够通过secureCRT的sz来下载文件,而用rz来上传文件.在unix/linux下则不必.由于scp命令能够完毕这项目工作. sz file替代方案为:scp usernam ...

  3. 606. Construct String from Binary Tree 【easy】

    606. Construct String from Binary Tree [easy] You need to construct a string consists of parenthesis ...

  4. python模块学习之collections

    更多信息请前往官网网址: https://docs.python.org/3.6/library/collections.html 8.3.5. namedtuple() 命名字段的元组的工场函数 命 ...

  5. tuple 元组

    创建单元素tuple tuple和list一样,可以包含 0 个.1个和任意多个元素. 包含多个元素的 tuple,前面我们已经创建过了. 包含 0 个元素的 tuple,也就是空tuple,直接用 ...

  6. NTP协议

    NTP(Network Time Protocol,网络时间协议)是由RFC 1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步.NTP基于UDP报文进行传输,使用的UDP端口 ...

  7. ubuntu 12.10 apt-get 源

    更改apt-get源配置文件/etc/apt/sources.list 用一下内容替换掉 deb http://mirrors.163.com/ubuntu/ precise main restric ...

  8. 【实用】如何在windows下快速截图？

    如何在windows下快速截图? 快速截图是很多人的需求.截图的工具和方案也很多,但是,这里给出一个通用的,被大众认为最高效的一个解决方案. 我们都知道键盘上有一个"prt sc" ...

  9. Spring MVC生成PDF文件

    以下示例演示如何使用Spring Web MVC框架生成PDF格式的文件.首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: ...

  10. oracle定时job

    转载自:http://www.cnblogs.com/hoojo/p/oracle_procedure_job_interval.html Oracle job procedure 存储过程定时任务 ...