首页 > 代码库 > Tab 防刷新
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="http://www.mamicode.com/Style/StyleLightBlue/css/hrms.css" rel="stylesheet" type="text/css" /> <link href="http://www.mamicode.com/Style/StyleLightBlue/css/table.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Style/jquery/jquery.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/#xiangmu">信息录入</a> <a href="http://www.mamicode.com/#kehu">信息管理</a> </div> <div id="xiangmu" class="tab" > 信息录入 </div> <div id="kehu" class="tab" > 信息管理 </div> </div> </form></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。