今天发现项目中有个小毛病,就是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>

Tab 防刷新的更多相关文章

  1. spring boot 学习(九)小工具篇:?秒防刷新

    注解 + 拦截器:?秒防刷新 小工具篇:工具许多都是我以前在 github 之类开源平台找到的小工具类,作者的信息什么的许多都忘了.先说声不好意思了.若有相关信息,麻烦提醒一下~ 解释 所谓的?秒防刷 ...

  2. 微信小程序redirect 到tab不刷新

    // 更新2018/11/20:现在小程序的页面栈长度为10 更正 2018/11/20: 经过一段时间的实践,我发现以前方法存在很多问题,比如 getCurrentPages 方法并不在官方的 AP ...

  3. java_WEB开发 防刷新

    客户端处理: 面对客户端我们可以使用Javascript脚本来解决,如下 1.重复刷新.重复提交 Ways One:设置一个变量,只允许提交一次. <script language=" ...

  4. JS实现 页面提交防刷新等待提示

    //关闭等待窗口 function closediv() { //Close Div document.body.removeChild(document.getElementById("b ...

  5. js防刷新的倒计时

    近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...

  6. 防刷新jq左侧滚动条导航展示

    html代码: <div class="fangchan_navcont">        <div class="fangchan_nav" ...

  7. Pjax.js防刷新技术

    自我感觉良好,所以拿出现在自己用的 Pjax.js 分享给大家 当然 这个版本是 经过本人修改后的版本,跟其它 拿过来就用的 不一样 而且区别还不小 大多的 Pjax 都是 跟后台无关的,而这个版本是 ...

  8. jQuery导航菜单防刷新

    为了实现最主要的功能,只写了一个粗糙的案例 CSS样式 ul,li{ list-style-type:none;} .nav { width: 100%; height: 35px; line-hei ...

  9. 竖向折叠二级导航JS代码(可防刷新ul/li结构)

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

随机推荐

  1. ArcObjects SDK(AE)10.1在vs2012安装的方法

    ArcObjects SDK(以下简称AO)10.1只支持vs2010,如果装了vs2012,再安装AO会提示一串鸡肠(英文),意思是AO10.1只支持vs2010 想在2012下安装,可以通过修改注 ...

  2. 方法字段[C# 基础知识系列]专题二:委托的本质论

    首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 引言: 上一个专题已和大家分享了我懂得的——C#中为什么须要委托,专题中简略介绍了下委托是什么以及委托简略的应用的,在这个专题中将对委托做进 ...

  3. Android Activity切换动画overridePendingTransition

    Activity在切换或者是退出的时候能够使用渐入,滑动,缩放等动态效果.使用的就是方法overridePendingTransition,能够直在Activity其中直接调用. overridePe ...

  4. w3cmark前端精彩博文周报 10.20-10.27

    w3cmark 官方Q群 145423956 | 官方微博 @w3cmark 自从最近微博屏蔽了我的站点域名,就很懒了.毕竟和不爽,一个纯技术站点还被认为不安全链接,还申诉无门,那些所谓的客服都是自动 ...

  5. HoloGraphLibrary

    https://github.com/Androguide/HoloGraphLibrary HoloGraphLibrary-master.zip

  6. gcc中不同namespace中同名class冲突时

    正常情况下,编译器都会报错,提示你有两个候选类,让你明确的选择一个. 比如我的情况,我自己设计了一个类Message, 然后在某个文件里面引用了它.但是我的文件中又引入了mongodb的头文件,非常不 ...

  7. Github上最全的APICloud开源前端框架效果盘点(转)

    1.微信网站几分钟变身“原生 App” 微信推出了微信JS-SDK,使微信公共号可以直接调用微信原生的接口,具备部分原生应用的能力.微信JS-SDK的推出,将大大提高微信公共号的 用户体验,但是如果存 ...

  8. Linux内核加载全流程

    无论是Linux还是Windows,在加电后的第一步都是先运行BIOS(Basic Input/Output System)程序——不知道是不是所以的电脑系统都是如此.BIOS保存在主板上的一个non ...

  9. 终于找到了无毒版的fences1.0(2.0版本要收费的)

    今天终于安装了fences1.0,桌面不用那么乱哄哄的啦 我在博客里上传了安装文件,方便大家下载安装,这是无毒的哦,网上有很多都是不能通过病毒检测的. 地址如下:点击这里下载 使用方法: 创建块:安装 ...

  10. Mysql中自增字段(AUTO_INCREMENT)的一些常识

    Mysql中自增字段(AUTO_INCREMENT)的一些常识: http://chengxuyuan.naxieshir.com/fenlei/2/p/151.html