不用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 == ...
随机推荐
- GAN的原理入门
开发者自述:我是这样学习 GAN 的 from:https://www.leiphone.com/news/201707/1JEkcUZI1leAFq5L.html Generative Adve ...
- opencv:基本图形绘制
可以使用opencv绘制 直线.圆.方形.椭圆等基本图形. 示例代码: #include <opencv.hpp> using namespace cv; int main() { // ...
- 2017.11.6对比Gerber差异+确认元器件方向，封装
1比对新旧版本的gerber差异 导入两个版本.其中主要的是bot(底层),Smt(元器件),sst(丝印层),top(顶层) 底层和顶层可以看出走线layout的差别,这点很重要,上次客户 ...
- NODE 性能优化
五个手段 “如果你的 node 服务器前面没有 nginx, 那么你可能做错了.”—Bryan Hughes Node.js 是使用 最流行的语言— JavaScript 构建服务器端应用的领先工具 ...
- canvas 绘制图像
结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- Zookeeper在Dubbo中的作用及Zk集群的选举原理
转自 : https://blog.csdn.net/zh15732621679/article/details/80723358
- 【常用软件】木木的常用软件点评（2）------VC程序员常用工具篇
摘自:http://blog.csdn.net/liquanhai/article/details/7215045 木木的常用软件点评(2)------VC程序员常用工具篇 分类: VC++经验总结 ...
- fileUtil文件的上传下载
package com.beisun.mbp.util; import java.io.BufferedInputStream;import java.io.BufferedOutputStream; ...
- Luogu 2530 化工厂装箱员
Written with StackEdit. Description \(118\)号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有\(3\ ...
- bzoj 3124 直径
Written with StackEdit. Description 小\(Q\)最近学习了一些图论知识.根据课本,有如下定义. 树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一 ...