<!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>