<!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. cocoapods_第二篇

    一.什么是CocoaPods CocoaPods是iOS项目的依赖管理工具,该项目源码在Github上管理.开发iOS项目不可避免地要使用第三方开源库,CocoaPods的出现使得我们可以节省设置和第 ...

  2. [置顶] 【VB.NET2010】在空间上显示提示气泡框的方法

    在VB6中,有ToolTip这个属性,可以设置鼠标悬浮在控件上的时候显示的图像. 而,在VB.NET中,实现这个功能需要使用一个类,ToolTip类. 代码如下(为了立即起效,建议将这些代码放在For ...

  3. [RxJS] Filtering operators: distinct and distinctUntilChanged

    Operator distinct() and its variants are an important type of Filtering operator. This lessons shows ...

  4. 《Java并发编程实战》第六章 任务运行 读书笔记

    一. 在线程中运行任务 无限制创建线程的不足 .线程生命周期的开销很高 .资源消耗 .稳定性 二.Executor框架 Executor基于生产者-消费者模式.提交任务的操作相当于生产者.运行任务的线 ...

  5. linux 最大文件描述符fd

    使用四种框架分别实现百万websocket常连接的服务器 著名的 C10K 问题提出的时候, 正是 2001 年.这篇文章可以说是高性能服务器开发的一个标志性文档,它讨论的就是单机为1万个连接提供服务 ...

  6. [iOS开发] 使用第三方字体不生效

    iOS中使用第三方字体并不复杂,通常只需要如下三个步骤: 1. 将第三方字体文件添加到工程(Project)中: 2. 在info.plist中添加一个新的键"Fonts provided ...

  7. 'Service' object has no attribute 'process'

    在使用selenium+phantomjs时,运行总是出现错误信息: 'Service' object has no attribute 'process' 出现该错误的原因是未能找到可执行程序&qu ...

  8. Get file name without extension.

    Ref:How to get file name without the extension? Normally,there are two ways to implements this:use t ...

  9. 【转】iOS开发UI篇—程序启动原理和UIApplication

    原文 http://www.cnblogs.com/wendingding/p/3766347.html   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程 ...

  10. 【转】iOS8 推送 获取 devicetoken

    标签:推送 push ios8 devicetoken token xcode6 原文:http://roybaby.blog.51cto.com/1508945/1557854 打开AppDeleg ...