<!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. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（二）—— easyui的简单实用

    下面开始在UserManager.Web中利用easyUI构建web. 1. 先删除自带的controllers.models和views(里面的shared和web.config可以保存)下面的文件 ...

  2. 8.1.1 Service的生命周期

    2010-06-21 16:57 李宁 中国水利水电出版社 字号:T | T <Android/OPhone开发完全讲义>第8章Android服务,本章主要介绍了Android系统 中的服 ...

  3. Spring简化配置

    一.提取公共配置 通过bean标签将公共的配置提取出来,然后指定abstract="true". 在其它bean标签中指定其parent就可以.

  4. DNS的概念，用途，DNS查询的实现算法

    1.DNS的概念,用途      DNS是由解析器以及域名服务器组成的.      域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器.      DNS ...

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

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

  6. [ci]安装配置jenkins及其插件

    后面尝试ms模式部署多台jenkins 安装jenkins:(hudson是jenkins的商业版) cd /etc/yum.repos.d/ wget http://pkg.jenkins.io/r ...

  7. 自己实现strcpy函数

    #include //printf #include //ssert #include //malloc #include //strlen char * sstrcpy(char * strdst, ...

  8. android studio - 隐藏编辑器上面的竖线

    android studio 的代码编辑器上面默认有一条竖线不知道是干什么用的,很难看.可以用下列方法进行隐藏. 取消选中这个复选框即可.

  9. JAVA Hibersap 框架调用 SAP

    In this example we will create a simple Maven project which uses Hibersap to call a function in SAP ...

  10. 推荐vim配置

    "设置编码,处理中文乱码,文件默认utf8编码set fileencodings=utf-8,ucs-bom,cp936,big5 "设置默认配色方案colorscheme def ...