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>
posted @ 2014-03-18 20:22  璇狼之风  阅读(333)  评论(0)  编辑  收藏  举报