<!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. git一个系列教程

    https://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E6%8E%A7%E5%8 ...

  2. sql server数据库课程设计分析

    课题:能源管理收费系统 系统功能的基本要求: (1)用户基本信息的录入:包括用户的单位.部门.姓名.联系电话.住址 : (2)用户水.电.气数据的录入(每个月的数据的录入): (3)水.电.气价格的管 ...

  3. Ceph：pg peering过程分析

    转自:https://www.ustack.com/blog/ceph%ef%bc%8dpg-peering/ Peering:互为副本的三个(此处为设置的副本个数,通常设置为3)pg的元数据达到一致 ...

  4. jsp中的session

    浏览器和服务器的异常通话 常用方法 setAttribute(String key,Object value);//设置值 getAttribute(String key); //取值 Invalid ...

  5. bat中for /f 如何截取任意行

    一.概述 for命令开关有很多,/L,/F,/R.这里仅对含有/F的for进行分析,这个可能是最常用的,也是最强的命令,主要用来处理文件和一些命令的输出结果. 1.命令格式:(1).FOR /F [& ...

  6. struts2.5框架使用通配符指定方法，某一个匹配不到

    在学习struts框架时经常会使用到通配符调用方法,如下:但奇怪的是,在validateName请求老报404,其他的都是ok的,开始以为是配置错了,检查好久才知道: <action name= ...

  7. 判定客户端IP所在的省市[2]

    在上一篇地址控件的基础上,添加了判定客户端IP所在省市的功能. 调用新浪提供的IP库接口:http://counter.sina.com.cn/ip/,(可直接点击链接查看返回的数据) 126提供的接 ...

  8. python之Beautiful Soup库

    1.简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索 ...

  9. MySQL免安装版安装配置、修改密码

    一:MySQL的下载安装 1.1 下载 我下载的是 ZIP Archive 版的,win7 64位的机器支持使用,而且相对而言,简单.干净. 首先,进入MySQL的官方网址,依次点击Downloads ...

  10. 《DSP using MATLAB》示例Example7.20

    代码: M = 51; alpha = (M-1)/2; Dw = 2*pi/M; l = 0:M-1; wl = Dw*l; T1 = j*0.39; k1 = 0:floor((M-1)/2); ...