<!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. chrome浏览器FQ插件，可以上Facebook等。。。

    不需要复杂的配置,看里面的介绍就知道了,目前很稳定. 插件下载地址:http://honx.in/_VGQLtYIaA10BIEKV

  2. struts提交action乱码

    没下雪但冷的让人直打哆嗦的天气,冷醉了的教训!!   问题解决步骤: 1.首先确认页面编码是否准确,并且是否与struts编码配置一样,就算是gbk对GBK,最好大小写保持一样 2.尝试先转码一次吧! ...

  3. Quartz简介 用 Quartz 进行作业调度

    http://www.ibm.com/developerworks/cn/java/j-quartz/现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展. ...

  4. sshd服务安装和配置管理

    1.SSHD简介(介绍) SSH协议:安全外壳协议,为Secure Shell的缩写,SSH为建立在应用层和传输层基础上的安全协议. sshd服务使用SSH协议可以用来进行远程控制,或在计算机之间传送 ...

  5. centos7下安装mysql5.7和jdk 1.8

    安装mysql5.7 具体安装过程可参见官网:A Quick Guide to Using the MySQL Yum Repository 进入/usr/local/src文件夹. cd /usr/ ...

  6. C++注释规范

      1 源文件头部注释 列出:版权.作者.编写日期和描述. /************************************************* Copyright:bupt Auth ...

  7. 收集别人的一些第三方(MARK)

    本文是恢复数据,数据丢失前,原文由 @shiren1118 发表于 2012-12-28,对 Ruby 社区对 iOS 开发感兴趣的朋友来说,非常有价值. iosboilerplate这个选项是比较成 ...

  8. DataUml Design 教程7 - 数据库生成模型

    DataUml Design支持数据库生成模型,并支持外键关系,能够根据外键自动生成类与类之间的关系. 目前DataUML Design支持MS Server.MY SQL.Oracle和Access ...

  9. centos IP 配置 和 克隆的centos解决上网问题

    1. vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. DEVICE=eth1HWADDR=00:0C:29:D2:9A:F5TYPE=EthernetU ...

  10. hdu2588 GCD 给定n，m。求x属于[1,n]。有多少个x满足gcd(x,n)>=m; 容斥或者欧拉函数

    GCD Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Sub ...