关于onhashchange变乱
|
副问题[/!--empirenews.page--]
onhashchange 变乱是一个新的变乱，改变乱在location.hash产生改变的时辰触发。FF3.6a2, IE 8, Chrome 4.0.206.1均支持该变乱。该变乱在ajax无革新页面提交中，能带来更好的用户体验。我们知道，在一个ajax哀求中，每次页面更新不能更新地点栏，汗青记录也不能记录每次更新的陈迹，地点栏左侧的“提高”和“退却”按钮失去了原有的成果。有了Onhashchange变乱，我们在ajax无革新页面提交的同时，可以很利便的记录每次更新的陈迹。IE8的AJAX Navigations操作该变乱放大缩小舆图，记任命户会见的陈迹，可查察AJAX Map。  引用的内容：[www.veryhuo.com]
<div class="tabBox" id="hashTab"> <ul class="tabTit"> <li><a href="#item1">item1</a></li> <li><a href="#item2">item2</a></li> <li><a href="#item3">item3</a></li> <li class="last"><a href="#item4">item4</a></li> </ul> <div class="tabCon"> <div class="item" id="item1"> 这里是第一个选项 </div> <div class="item hide" id="item2"> 这里是第二个选项 </div> <div class="item hide" id="item3"> 这里是第三个选项 </div> <div class="item hide" id="item4"> 这里是第四个选项 </div> </div> </div> Css代码不再列出，详情可以参考示例页。接下来我们开始构建tab切换结果的函数，操作jQuery，可以很轻易的构建我们必要的函数。虽然，你也可以行使jQuery自身的tab切换插件。 Copy to Clipboard引用的内容：[www.veryhuo.com]
var current = "#item1"; var title = document.title; function tabSwitch(obj,current){ $(".tabTit li").removeClass("current"); $(current).closest("li").addClass("current"); $(".tabCon .item").hide(); $(obj).show(); window.location.hash = obj; document.title = title + " | " + obj.split("#")[1]; $("#currentObj").html("当前被点击的工具为：" + obj + ""); } 上面的代码中，变量current记录当前被点击的工具，title记录页面的title，以便每次，点击时更新页面的title。每次点击时，将每次点击的工具记录在hash之中。至于触发变乱，不外是比拟当前hash与window.location.hash，并将新的hash存储到window.location.hash之中。 Copy to Clipboard引用的内容：[www.veryhuo.com]
function HashChangeHandler(){ var hash = window.location.hash; if (hash != current){ current = hash; tabSwitch(hash,$("a[href='" + hash +"']")); } } 最后，在body标签上绑定onhashchange变乱： 引用的内容：[www.veryhuo.com]
<script src="jquery-1.3.2.min.js"></script> <script src="js/jquery.address-1.1.js"></script>Html的tab标签做如下修改： <ul class="tabTit"> <li><a href="#item1" rel="address:item1">item1</a></li> <li><a href="#item2" rel="address:item2">item2</a></li> <li><a href="#item3" rel="address:item3">item3</a></li> <li class="last"><a href="#item4" rel="address:item4">item4</a></li> </ul> （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
