jQuery tab切换防止页面刷新

开发 前端
tab切换,是一个很常见的效果,今天在项目中遇到这样一个问题。就是切换后,页面刷新,又重新定位到第一个上了,很是郁闷。在网上找了很多jquery效果,都是这样的,于是自己写了一个。防止页面刷新的tab切换。

tab切换,是一个很常见的效果,今天在项目中遇到这样一个问题。就是切换后,页面刷新,又重新定位到***个上了,很是郁闷。

在网上找了很多jquery效果,都是这样的,于是自己写了一个。防止页面刷新的tab切换。

html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.     <title></title> 
  6.      <link href="../Style/admin.css" rel="stylesheet" type="text/css" /> 
  7.      <script type="text/javascript" src="System/js/jquery-1.7.min.js"></script>   
  8.      <script type="text/javascript" src="tabs.js"></script> 
  9.      <style type="text/css"> 
  10.      .tabs{ list-style:none; width:400px; height:23px;}    
  11.      .tabs  a {display:block; float:left;padding:2px 3px; background:#eff7ff; text-decoration:none;  margin-right:2px;}  
  12.      .tabs  a.current{ background:#a1c6de; color:#000;}  
  13.      .tab{ display:block; width:400px; height:300px; border:1px solid #ccc;}  
  14.      </style> 
  15. </head> 
  16. <body> 
  17.  <div class="tabs">     
  18.    <a href="#xiangmu" >项目信息</a> <a href="#kehu">客户</a><a href="#wenda">职位提问</a> 
  19.  </div> 
  20.  <div id="xiangmu" class="tab">项目信息</div> 
  21.  <div id="kehu" class="tab"> 客户</div> 
  22.  <div id="wenda" class="tab">职位提问 </div> 
  23.  
  24. </body> 
  25. </html> 

js代码:

  1. $(function () {  
  2.     $("div.tab").hide(); //隐藏所有  
  3.     $("div.tabs a:first").addClass("current"); //***个元素选中  
  4.     $("div.tab:first").show(); //***个内容显示  
  5.  
  6.     $("div.tabs a").click(function () {  
  7.         $("div.tabs a").removeClass("current"); //将所有的tab去掉current样式  
  8.         $(".tab").hide(); //隐藏所有  
  9.         $(this).addClass("current");  
  10.         var activeTab = $(this).attr("href"); //获取div  
  11.         $(activeTab).show();  
  12.     });  
  13.  
  14.     //获取从url中传递的  
  15.     var url = window.location.href;  
  16.     var reg = /#.+/;  
  17.     if (reg.test(url)) {//含有#,默认为只有一个#,多个#情况不考虑    
  18.         //隐藏所有  
  19.         $("div.tabs a").removeClass("current"); //将所有的tab去掉current样式  
  20.         $(".tab").hide(); //隐藏所有  
  21.  
  22.         var href = url.split('#')[1];         
  23.         $("div.tabs [href=#" + href + "]").addClass("current");  
  24.         $("#" + href).show();  
  25.     }  
  26. }); 

代码很简单,思路也很清晰,不过很实用,

比如上例中,你刷新页面,想重新定位到第二个tab上,只需要,重新指定xxx.aspx#kehu即可

附截图

 

原文链接:http://www.cnblogs.com/clc2008/archive/2012/05/22/2512897.html

【编辑推荐】

  1. jQuery插件之Ajax自动完成
  2. jQuery基本事件代码优化
  3. 印象深刻的jQuery手风琴效果应用
  4. jQuery可多次使用的***插件
  5. JQuery插件的开发真的有那么难吗
责任编辑:张伟 来源: loafinweb的博客
相关推荐

2022-04-02 20:51:19

Tab搭建操作系统鸿蒙

2023-06-12 15:37:38

鸿蒙ArkUI

2011-05-31 09:23:58

Android Activity

2013-12-02 15:25:38

jQuery插件

2021-01-13 13:51:04

鸿蒙HarmonyOSTab选项卡

2021-03-12 16:25:17

技巧vue页面刷新

2010-11-23 16:56:04

mysql表单

2024-10-17 09:02:16

2012-08-14 14:00:21

JavaScript

2010-01-04 14:14:43

Silverlight

2017-10-17 15:40:25

javascript刷新页面

2023-04-26 08:18:48

FormPrompt表单更改

2009-06-05 10:37:52

struts2 国际化表单

2015-03-26 13:14:53

javascriptjs callback实现调用

2015-05-13 09:36:18

js模拟手机下拉刷新

2009-07-31 08:56:59

ASP.NET页面刷新

2009-06-26 15:17:27

jQuery

2022-01-09 23:34:08

Windows 11Windows微软

2021-02-19 11:01:46

异步竞态接口异步

2012-03-02 09:37:53

Ajax
点赞
收藏

51CTO技术栈公众号