<!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页切换，刷新，后退，前进状态自动维护 很好用的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  3. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  4. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  5. 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 ...

  6. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  7. JQuery实现tab页

    用ul 和 div 配合实现tab 页 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="U ...

  8. jQuery 效果 - toggle() 方法切换元素的可见状态。

    定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...

  9. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

随机推荐

  1. 亚马逊EC2

    亚马逊EC2编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 亚马逊弹性计算云(EC2,Elastic Compute Cloud)是一个让使用者可以租用云端电脑运行所需 ...

  2. MongoCola使用教程 2 - MongoDB的Replset 初始化和配置

    前言 首先再次感谢博客园的各位朋友.正是你们的关注才让我有信心将这个工具开发下去. 这周同样也有热心网友对于MongoCola存在的问题给予了反馈. 这次工具更新到了版本1.20,强化的地方是增加了R ...

  3. 软工作业-wc（Python实现）

    GitHub地址:GitHub PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划  30  40 · Esti ...

  4. C#实现文件与二进制互转并存入数据库

    这篇文章主要介绍了C#实现文件与二进制互转并存入数据库,本文直接给出代码实例,代码中包含详细注释,需要的朋友可以参考下 //这个方法是浏览文件对象     private void button1_C ...

  5. webpack 使用中的问题

    用gulp-watch代替watch webpack打包体积分析器 集合

  6. 《Drools7.0.0.Final规则引擎教程》第4章 4.1 规则文件

    一个标准的规则文件的格式为已".drl"结尾的文本文件,因此可以通过记事本工具进行编辑.规则放置于规则文件当中,一个规则文件可以放置多条规则.在规则文件当中也可以存放用户自定义的函 ...

  7. 3.了解linux系统以及搭建学习环境

    目录: 1.linux的前世今生. 2.企业如何选择linux系统? 3.如何在虚拟机上安装linux系统?搭建学习环境. 1.linux的前世今生. 1).起源:先是贝尔实验室的Unix系统,因为各 ...

  8. SSH框架(1)

    一. SSH框架相关的面试题:   1.  BeanFactory的作用是什么?   [中] BeanFactory是配置.创建.管理bean的容器,有时候也称为bean上下文.Bean与bean的依 ...

  9. LeetCode Complex Number Multiplication

    原题链接在这里:https://leetcode.com/problems/complex-number-multiplication/description/ 题目: Given two strin ...

  10. django中的@login_required

    转:http://www.cnblogs.com/ccorz/p/Django-zhong-loginrequired-yong-fa-jian-jie.html 1.网站开发时的登录需求: ===用 ...