不用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 == ...
随机推荐
- Xcode export/upload error: Your session has expired. Please log in 解决方法
问题: 突然打包账号不好使了 重登 重启 清缓存 一套都打完了 还是不好使 解决方法: 删除掉其他账号 重新登录 参考网址 http://stackoverflow.com/ques ...
- opencv:摄像头和视频的读取
示例代码: #include <opencv.hpp> using namespace cv; int main() { VideoCapture Capture(); //打开默认摄像头 ...
- SpringBoot_11_将springboot项目部署到外部tomcat上
一.前言 二. 三.参考资料 如何将Spring Boot项目打包部署到外部Tomcat 2.SpringBoot 项目如何在tomcat容器中运行
- tomcat映射物理路径
<Context path="/woyoubaoweb/upload" docBase="/opt/file/image/woyoubaoweb/upload&qu ...
- 【dlbook】机器学习基础
[机器学习基础] 模型的 vc dimension 如何衡量? 如何根据网络结构衡量模型容量?有效容量和模型容量之间的关系? 统计学习理论中边界不用于深度学习之中,原因? 1.边界通常比较松, 2.深 ...
- OS快捷键
OS X 键盘快捷键 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command 键(标有 符号的按键)和“c”键会将当前选中的任何内容(文字.图形等)拷贝至夹纸板.这也 ...
- Arcgis for javascript不同的状态下自定义鼠标样式
俗话说:爱美之心,人皆有之.是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点.在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式. 首先,说几个状态 ...
- lwip 使用记录(1)
原子F429的lwip实验:网络实验8 NETCONN_TCP客户端实验 代码 //tcp客户端任务函数 static void tcp_client_thread(void *arg) { OS_C ...
- HDU3507Print Article （斜率优化DP）
Zero has an old printer that doesn't work well sometimes. As it is antique, he still like to use it ...
- leetcode_sql_3，181,182,183
181. Employees Earning More Than Their Managers The Employee table holds all employees including the ...