不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用
<!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页切换，刷新，后退，前进状态自动维护 很好用的更多相关文章
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- 用CSS实现Tab页切换效果
用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...
- ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品
例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始: 1. 打开调试开关 文件地址:include/cls_template.php 找到 : functi ...
- tab页切换
做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- 使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
- JQuery实现tab页
用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...
- jQuery 效果 - toggle() 方法切换元素的可见状态。
定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...
- 利用jquery写的一个TAB页切换效果
函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...
随机推荐
- iRed邮箱使用情况
iRedAdmin-Pro 在域名的用户列表里直接显示了邮箱使用情况的百分比,并有一个细小的进度条以不同颜色标示百分比情况.用户的邮箱限额定义在 mailbox.quota,当前使用情况定义在 use ...
- WordCounter Python实现
<!doctype html>博客.md p:first-child, #write > ul:first-child, #write > ol:first-child, #w ...
- git远程分支回退
[本地代码回退] git reset --hard commit-id :回滚到commit-id,讲commit-id之后提交的commit都去除 git reset --hard HEAD~3:将 ...
- debounce与throttle区别
在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应.John Resig发表了一篇文章< a blog post about the problem&g ...
- Failed to export application
打包Android项目,遇到Failed to export application的错误提示.如何处理呢 我当时是 在替换图标时 没有完全替换 只替换了 四张drawable_h图片,没有替换上 ...
- python学习之多线程(一)
引入线程包或者命名空间import threading 一:建立一个简单的线程程序 import time, threading def test(): print('thread %s is ...
- MySql必知必会实战练习（一）表创建和数据添加
1.实战环境 windows 10 64位 mysql-8.0.13 mysql编辑和查看工具:NaviCat for MySql 表脚本文件: ########################### ...
- 计算机信息类ComputerInfo
using System; using System.Management; using System.Net; using System.Net.Sockets; using System.Text ...
- maven依赖顺序原则
使用maven的程序员都会遇到一个问题,那就是maven依赖冲突的问题,这会导致ClassNotFound或者MethodNotFound这样的异常.其实只要明白maven依赖的根本性的原则就不怕这样 ...
- 老齐python-基础1
1.基本对象类型 1.1数: >>> 3 #基本数字 3 >>> 3333 3333 >>> 3.222 3.222 >>&g ...