<!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#和java和android中的NetWorkAdapter,httpRequest,WebView,json,xml

    原文地址:http://blog.csdn.net/intbird C#NetWorkAdapter 20121011.======================================== ...

  2. [Javascript] An Introduction to JSPM (JavaScript Package Manager)

    JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This vi ...

  3. innodb 页分配

    [root@localhost test]# python /root/soft/py_innodb_page_info.py -v t1.ibdpage offset 00000000, page ...

  4. Java实现常见排序算法

    常见的排序算法有冒泡排序.选择排序.插入排序.堆排序.归并排序.快速排序.希尔排序.基数排序.计数排序,下面通过Java实现这些排序 1.冒泡排序 package com.buaa; import j ...

  5. jboss 7 as1 日志配置

    原文地址:https://docs.jboss.org/author/display/AS71/Logging+Configuration Overview The overall server lo ...

  6. 移动端 设置 小于12px 字体 初探

    1.移动端字号规范 2. 百度字号调研 3. 绕过12px 限制 4. 缩放 5. chrome  字号

  7. java的各个队列之间的联系和区别是什么

    java的各个并发队列之间的联系和区别 java.util.concurrent是在并发编程中很常用的实用工具类 ArrayBlockingQueue, DelayQueue, LinkedBlock ...

  8. jQuery AJAX实现调用页面后台方法

    1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...

  9. 在Iframe框架下如何跳转到登录界面

    在Iframe框架下跳转到登录界面总会跳到子界面中,类似于下图 试用Respon.Redirect()不行, 用Js函数,但我跳转代码都是写在cs文件中的,用Respose.write(),js函数根 ...

  10. .net中使用JQuery Ajax判断用户名是否存在的方法

    //第一步:新建一个(*.aspx|*.html)Index.aspx页面 添加jquery 1 <html xmlns="http://www.w3.org/1999/xhtml&q ...