<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>javascript text</title>

<script src="js/jquery-1.8.0.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

   var url = "#"+window.location.href.split("#")[1];

   Router(url);

   $("a").click(function(){

        var url = $(this).attr("href");

        //Router(url);

   });

   $("input[type=\"button\"]").click(function(){

       var url = $(this).attr("data");

       //Router(url);

	   window.location.href="#windowsubmit";

   });

   function Router(url){

       var bview = $("#view");

       switch(url){

	       case "#windowsubmit":bview.text("我提交了表单"); break;

		   case "#index" : bview.text("我的网站首页");break;

		   case "#detail" : bview.text("关于我们");break;

		   case "#content" : bview.text("我的QQ：602730971");break;

		   default:bview.text("未知的网站未知");break;

	   }

   }

   $(window).bind("hashchange",function(){

      //alert( window.location.href);

	  var url = "#"+window.location.href.split("#")[1];

	  //alert(url);

	  Router(url);

   });

});

</script>

</head>

<body onload="loadfun()">

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

<a href="#detail">关于我们</a>

<a href="#content">联系我们</a>

<fieldset>

    <legend>按钮跳转</legend>

	<input type="button" value="提交事件" onclick="" data="#windowsubmit" />

</fieldset>

<fieldset>

<legend>路由管理</legend>

<div>

<a href="http://www.baidu.com">百度一下</a><br />

<a href="http://www.hao123.com">Hao123网站导航</a><br />

<a href="http://www.163.com">网易新闻</a><br />

<a href="http://www.qq.com">腾讯新闻</a>

</div>

</fieldset>

<fieldset>

<legend>内容控制</legend>

<div id="view">

   adfasdfasdfasdf

</div>

</fieldset>

</body>

</html>

　　但是 hashchange 在低版本的IE中存在兼容问题，有时间得测试一下

WebApp 中用 hashchange 做路由解析的更多相关文章

  1. Gin 路由解析树详解

    说明: 无意间看到gin 中有trees的属性,好奇想一探究竟,到底gin是怎样生成路由解析树的? 这是一个测试截图,图中大概可以了解到gin是怎样做路由解析的.配合源码的阅读,解析树大致如下: 通过 ...

  2. ASP.NET 路由解析

    这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的 ...

  3. MVC路由解析---MapRoute

    文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 引言 前面我们讲了IgnoreRout ...

  4. ASP.NET Web API路由解析

    前言 本篇文章比较长,仔细思考阅读下来大约需要15分钟,涉及类图有可能在手机显示不完整,可以切换电脑版阅读. 做.Net有好几年时间了从ASP.NET WebForm到ASP.NET MVC再到ASP ...

  5. AspNet Mvc 路由解析中添加.html 等后缀 出现404错误的解决办法

    使用Mvc 有时候我们希望,浏览地址以.html .htm 等后缀名进行结尾. 于是我们就在RouteConfig 中修改路由配置信息,修改后的代码如下 routes.IgnoreRoute(&quo ...

  6. 使用linux系统做路由转发

    使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题 ...

  7. WebApi路由解析增加版本控制

    1.自定义路由解析类 public class VersionHttpControllerSelector : IHttpControllerSelector { private const stri ...

  8. Linux/Centos下使用mtr做路由图进行网络分析

    工具作用: mtr可以做路由图供我们分析哪里出现故障或者是否存在有网络拥塞的情况 1. 首先安装mtr 工具 使用yum  安装 :  yum  install mtr -y  2. 使用 我经常在工 ...

  9. vue-router做路由拦截时陷入死循环

    今天分享一下使用vue-router做路由拦截时遇到的坑. 需要提前了解的api 1:router.beforeEach( to , from ,next) ; to: Route: 即将要进入的目标 ...

随机推荐

  1. C#中的线程(中)-线程同步

    1.同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程 ...

  2. 用网页server实现钢琴弹奏(使用Wizwiki-W7500)

      我将为大家介绍一个能够弹钢琴的网页server. 你仅仅须要打开网页,跟着以下步骤,用这个WIZwiki-W7500项目,就能轻松实现用网页server弹钢琴. 很easy. 我们開始吧! 第 ...

  3. MySql The service could not be started

    MySql安装 由于需要用mySql数据库今天就把它安上了,每次安装软件,数据库总是够我们折腾的,有时出现错误甚至比重装系统还要让人头疼. 今天在安的过程中就不出了很多错误,在重启与重装的反复捣鼓中终 ...

  4. 在32位Windows 8或Windows 7上安装Windows Phone 8 SDK

    这需要一点技巧的,其实WPSDK8是支持32位系统的,可因为微软脑残的限制,安装方法如下: 这里必需要有一个工具,OllyDbg 2.0,去官网下载即可. 启动OD,在菜单打开选项窗口,在Events ...

  5. Guangsoushensou 2

    <span style="color:#330099;">/* C - 广搜 基础 Time Limit:1000MS Memory Limit:65536KB 64b ...

  6. Web性能优化系列

    web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...

  7. 汉诺塔-Hanoi

    1. 问题来源: 汉诺塔(河内塔)问题是印度的一个古老的传说. 法国数学家爱德华·卢卡斯曾编写过一个印度的古老传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度教的主神梵 ...

  8. Java基础知识强化之集合框架笔记24：ArrayList存储自定义对象并遍历

    1. ArrayList存储自定义对象并遍历 2. 代码示例: Student.java,如下: package cn.itcast_01; public class Student { privat ...

  9. oracle多表关联删除数据表记录方法

    oracle多表关联删除的两种方法 第一种使用exists方法 delete from tableA where exits ( select 1 from tableB Where tableA.i ...

  10. poj 1849 Two

    /*poj 1849 two 思考一下会发现 就是求直径 直径上的中点就是两个人分开的地方(不再有交集)*/ #include<cstdio> #define maxn 100010 us ...