不用jquery实现tab页切换,刷新,后退,前进状态自动维护 很好用
2013-09-23 16:42
633 查看
<!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> <title>ajax保持状态多标签切换</title> <style type="text/css"> body { margin: 0 10px; padding: 0px; font-size: 14px; } .hide { display: none; } .tab_bar { height: 50px; padding: 0; border-bottom: 1px solid #A4A4A4; } .tab_bar ul { margin-top: 0px; margin-left: 50px; } .tab_bar ul li { display: inline; } .tab_bar ul li a { height: 20px; text-decoration: none; color: #333; margin: 9px 10px 10px 0; padding: 10px; display: inline-block; background-color: #DBECFE; border: 1px solid #A4A4A4; } .tab_bar ul li a:hover, .tab_bar ul li a.here { background-color: #fff; border-bottom: 1px solid #fff; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function createFunction(obj, strFunc) { var args = []; if (!obj) obj = window; for (var i = 2; i < arguments.length; i++) args.push(arguments[i]); return function () { obj[strFunc].apply(obj, args); } } function addEvent(obj, type, fn) { if (obj.attachEvent) { obj.attachEvent('on' + type, fn); } else obj.addEventListener(type, fn, false); } function monitHashChange(hashChangeFire) { var hash = window.location.hash.substring(1); if (('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || document.documentMode == 8)) { window.onhashchange = function () { hashChangeFire(window.location.hash.substring(1)); }; } else { setInterval(function () { var ischanged = hash != window.location.hash.substring(1); if (ischanged) { hash = window.location.hash.substring(1); hashChangeFire(hash); } }, 150); } } function show_panel(link) { link = typeof (link) == "string" ? link : link.id.replace("link_", ""); window.location.hash = link; if (link.length == 0) link = "install_sql"; var links = ["install_sql", "basic_setting", "mail_setting", "alipay_setting"]; for (var i = 0; i < links.length; i++) { var n = links[i]; if (n == link) { $("link_" + n).setAttribute("class", "here"); $("div_" + n).style.display = "block"; } else { $("link_" + n).removeAttribute("class"); $("div_" + n).style.display = "none"; } } } var link = (!window.location.hash) ? "install_sql" : window.location.hash.substring(1); addEvent(window, "load", createFunction(null, "show_panel", link)); addEvent(window, "load", createFunction(null, "monitHashChange", show_panel)); </script> </head> <body> <div class="tab_bar"> <ul> <li><a href="javascript:;" onclick="show_panel(this)" id="link_install_sql" class="here"> 1、安装数据库</a></li> <li><a href="javascript:;" onclick="show_panel(this)" id="link_basic_setting">2、设置基本配置</a></li> <li><a href="javascript:;" onclick="show_panel(this)" id="link_mail_setting">3、邮件相关设置</a></li> <li><a href="javascript:;" onclick="show_panel(this)" id="link_alipay_setting">4、支付宝配置</a></li> </ul> </div> <div id="div_install_sql"> <h2> 1、安装数据库</h2> </div> <div id="div_basic_setting" class="hide"> <h2> 2、设置基本配置</h2> </div> <div id="div_mail_setting" class="hide"> <h2> 3、邮件相关设置</h2> </div> <div id="div_alipay_setting" class="hide"> <h2> 4、支付宝配置</h2> </div> </body> </html>
相关文章推荐
- 蛙蛙推荐:不用jquery实现tab页切换,刷新,后退,前进状态自动维护
- ajax无刷新页面切换,历史记录后退前进解决方案
- 不用jquery等框架实现ajax无刷新登录
- jQuery实现点击单选按钮切换选中状态效果
- jQuery实现图片与文字描述左右滑动自动切换的方法
- 【JS】:JS实现页面的刷新,后退和前进
- 使用Jquery的局部刷新功能,实现菜单内容的动态切换
- 用js实现网页中打印、刷新、关闭、前进、后退、返回等操作
- jQuery实现tab标签自动切换的方法
- 招聘网站基于jQuery实现自动刷新简历
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
- 用button实现页面的刷新、后退、前进
- 带有Checkbox和Select的自动刷新_JQuery实现
- JAVA编写的浏览器,在别人的基础上做了些许修改,实现了前进,后退,刷新功能,添加了一个搜索框,具体情况在运行结果中的文件-->注意中
- JS实现菜单按钮的前进后退切换
- 使用jquery 和 css 实现互斥按钮状态切换
- Map用法(框架顶部实现首页,后退,前进,刷新)
- JQuery实现页面刷新滚动条自动滚动到特定位置
- 实现不刷新整个页面进行前进后退
- Fragment 实现tab页卡切换并保存界面状态,动态添加Fragment