首页 > 网站 > WEB开发 > 正文

Tab 防刷新

2024-04-27 14:36:19
字体:
来源:转载
供稿:网友
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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表