zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    读取列表下标
    字典dict详解
    使用mysql的长连接
    oauth授权协议的原理
    安装性能测试工具:sysbench和使用apache的ab
    发送邮件出现问题
    获取用户的真实ip
    清理代码的阅读笔记
    开发中三个经典的原则
    要干大事就不能把面子看得太重
  • 原文地址:https://www.cnblogs.com/houlin/p/3608640.html
Copyright © 2011-2022 走看看