• Tab 防刷新


    今天发现项目中有个小毛病,就是tab老是刷新,就上网Copy了一份防止刷新的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 runat="server">
        <title></title>
        <link href="../Style/StyleLightBlue/css/hrms.css" rel="stylesheet" type="text/css" />
        <link href="../Style/StyleLightBlue/css/table.css" rel="stylesheet" type="text/css" />
        <script src="../Style/jquery/jquery.js" type="text/javascript"></script>
        <script src="../Style/jquery/Basic.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("div.tab").hide(); //隐藏所有
                $("div.tabs a:first").addClass("current"); //第一个元素选中
                $("div.tab:first").show(); //第一个内容显示
    
                $("div.tabs a").click(function () {
                    $("div.tabs a").removeClass("current"); //将所有的tab去掉current样式
                    $(".tab").hide(); //隐藏所有
                    $(this).addClass("current");
                    var activeTab = $(this).attr("href"); //获取div
                    $(activeTab).show();
                });
            });
        </script>
        <style type="text/css">
            .tabs
            {
                list-style: none;
                width: 400px;
                height: 23px;
            }
            .tabs a
            {
                display: block;
                float: left;
                padding: 2px 3px;
                background: #eff7ff;
                text-decoration: none;
                margin-right: 2px;
            }
            .tabs a.current
            {
                background: #a1c6de;
                color: #000;
            }
            .tab
            {
                display: block;
                width: 400px;
                height: 300px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div class="tabs">
                <a href="#xiangmu">信息录入</a>
                <a href="#kehu">信息管理</a>
            </div>
            <div id="xiangmu" class="tab"  >
                信息录入
            </div>
            <div id="kehu" class="tab" >
                信息管理
            </div>
        </div>
        </form>
    </body>
    </html>
  • 相关阅读:
    标题栏中小图标和文字垂直居中的解决办法
    width:100%和width:inherit
    css盒子模型的宽度问题
    position:absolute和margin:auto 连用实现元素水平垂直居中
    超链接a的download属性 实现文件下载功能
    JavaScript的String对象的属性和方法
    原生JavaScript 封装ajax
    深入理解JVM之对象分配流程
    http协议详解
    在RMI方式实现RPC时,为什么业务实现类UserServiceImpl中要显示的创建无参构造方法
  • 原文地址:https://www.cnblogs.com/houlin/p/3608640.html
Copyright © 2020-2023  润新知