<!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. Node.js小白开路（一）-- 全局变量篇

    全局内容是有点类似于我们在浏览器编程的时候的window对象的,当时在node之中虽然我们编写的变量会自动的给出上下文环境(模块),但是全局变量的存在还是大大的帮助了我们编程时候的便捷性.我们可以在任 ...

  2. 【第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛-J】 强迫症的序列

    小A是一个中度强迫症患者,每次做数组有关的题目都异常难受,他十分希望数组的每一个元素都一样大,这样子看起来才是最棒的,所以他决定通过一些操作把这个变成一个看起来不难受的数组,但他又想不要和之前的那个数 ...

  3. Struts08---全局结果和全局异常的配置

    01.创建测试页面 <%-- 验证全局结果 和 局部结果 --%> <a href="user/UserAction_add">新增用户</a> ...

  4. LeetCode OJ：Permutations II（排列II）

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  5. New Concept English three （32）

    26w/m 68 The salvage operation had been a complete failure. The small ship, Elkor, which had been se ...

  6. C语言中的extern关键字用法

    在C语言中,修饰符extern用在变量或者函数的声明前,用来说明“此变量/函数是在别处定义的,要在此处引用”. 1. extern修饰变量的声明.举例来说,如果文件a.c需要引用b.c中变量int v ...

  7. ERP与MES

    EAS-ERP企业资源计划系统 能将企业的客户管理.商品管理.采购管理.仓储管理.销售管理.生产管理.应收应付.财务管理.工资管理.费用管理和业绩考核管理以及业务预警和全方位的分析汇总融为一体,为企业 ...

  8. Oracle Sql Developer 连接 SqlServer

    1.下载 jTDS - SQL Server and Sybase JDBC driver 地址:http://sourceforge.net/projects/jtds/files/ 2.运行SQL ...

  9. JVM介绍(二)

    1 JVM简介 JVM是我们Javaer的最基本功底了,刚开始学Java的时候,一般都是从“Hello World”开始的,然后会写个复杂点class,然后再找一些开源框架,比如Spring,Hibe ...

  10. F4NNIU 学习目录 （2018-08-22）

    F4NNIU 学习目录 语言 C 语言 C 语言程序设计进阶 在线刷题 https://leetcode-cn.com/problemset/all/ 工具 Git 版本管理 在线教程 在线教程