不用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 == ...
随机推荐
- python基础8之类的实例化过程剖析
一.概述 之前我们说关于python中的类,都一脸懵逼,都想说,类这么牛逼到底是什么,什么才是类?下面我们就来讲讲,什么是类?它具有哪些特性. 二.类的语法 2.1 语法 class dog(obje ...
- MVC框架中的值提供机制（二）
在MVC框架中存在一些默认的值提供程序模板,这些值提供程序都是通过工厂模式类创建;在MVC框架中存在需要已Factory结尾的工厂类,在值提供程序中也存在ValueProviderFactories工 ...
- 启动代码之开iCache
1.什么是cache,有什么用 cache是一种内存,叫高速缓存.从容量来说:CPU < 寄存器 < cache < DDR从速度来说:CPU > 寄存器 > ca ...
- Spring 依赖注入（一、注入方式）
Spring是一个依赖注入(控制反转)的框架,那么依赖注入(标控制反转)表现在那些地方了? 即:一个类中的属性(其他对象)不再需要手动new或者通过工厂方法进行创建,而是Spring容器在属性被使用的 ...
- L133
The U.S. Food and Drug Administration is considering a ban on flavorede-cigarettes in response to an ...
- 第2章 开始Flex
* Flex开发中可用两种语言 1.MXML 2.ActionScript * Flex中使用两个组件集 1.MX (mx.*) 早期的Flex版本用到的组件集 2.Spark (spark.*) F ...
- libwebsockets 运行问题
/****************************************************************************** * libwebsockets 运行问题 ...
- The last packet sent successfully to the server was 0 milliseconds ago
出现异常”The last packet sent successfully to the server was 0 milliseconds ago.“的大部分原因是由于数据库回收了连接,而系统的缓 ...
- 遇到eclipse安装插件一直报错问题（版本问题）
刚好用了一个插件,然后在线安装报错了,一直报错,之前用的这个插件是直接解压贴的,现在在线安装出错,就很尬,我又有点懒,不想再去下载,贴,所以查了下,有网友说是eclipse的插件版本问题,更新了下,成 ...
- call()方法和apply()方法用法总结
1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...