不用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 == ...
随机推荐
- [转载]Java给word中的table赋值
一.准备工作: 下载PageOffice for Java:http://www.zhuozhengsoft.com/dowm/ 二. 实现方法: 要调用PageOffice操作Word中的tabl ...
- HTTP请求常用状态码
常见的http请求响应的状态码 一些常见的状态码为: 200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状 ...
- TCPL学习笔记：4-12以及4-13。关于使用递归的问题。
4-12.写一个函数itoa,通过递归调用将整数转换成为字符串. #include <stdio.h> #include <stdlib.h> void Itoa(int nu ...
- 常用algorithm及其Python实现
冒泡排序 def bubble_sort(li): for i in range(len(li)-1): # i表示第几趟 for j in range(len(li)-i-1): # j表示图中的箭 ...
- Leetcode22. Generate Parentheses（生成有效的括号组合）
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74937307冷血之心的博客) 题目如下:
- TF随笔-3
>>> import tensorflow as tf>>> node1 = tf.constant(3.0, dtype=tf.float32)>>& ...
- Apache中 RewriteCond 规则参数介绍 转
摘要: RewriteCond指令定义了规则生效的条件,即在一个RewriteRule指令之前可以有一个或多个RewriteCond指令.条件之后的重写规则仅在当前URI与Pattern匹配并且满足此 ...
- MySql必知必会实战练习（三）数据过滤
在之前的博客MySql必知必会实战练习(一)表创建和数据添加中完成了各表的创建和数据添加,MySql必知必会实战练习(二)数据检索中介绍了所有的数据检索操作,下面对数据过滤操作进行总结. 1. whe ...
- SOA的挑战：实体集合【转】
SOA的挑战:实体集合 发布日期 : 2005-11-06 | 更新日期 : 2005-11-06 Ramkumar Kothandaraman 微软公司 适用于: Microsoft® Visua ...
- NSArray四种遍历方法