基于jquery tab切换(防止页面刷新)


Posted in Javascript onMay 23, 2012

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

<!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> 
<title></title> 
<link href="../Style/admin.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="System/js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="tabs.js"></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> 
<div class="tabs"> 
<a href="#xiangmu" >项目信息</a> <a href="#kehu">客户</a><a href="#wenda">职位提问</a> 
</div> 
<div id="xiangmu" class="tab">项目信息</div> 
<div id="kehu" class="tab"> 客户</div> 
<div id="wenda" class="tab">职位提问 </div> 
</body> 
</html>

js代码:
$(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(); 
}); 
//获取从url中传递的 
var url = window.location.href; 
var reg = /#.+/; 
if (reg.test(url)) {//含有#,默认为只有一个#,多个#情况不考虑 
//隐藏所有 
$("div.tabs a").removeClass("current"); //将所有的tab去掉current样式 
$(".tab").hide(); //隐藏所有 
var href = url.split('#')[1]; 
$("div.tabs [href=#" + href + "]").addClass("current"); 
$("#" + href).show(); 
} 
});

代码很简单,思路也很清晰,不过很实用,
比如上例中,你刷新页面,想重新定位到第二个tab上,只需要,重新指定xxx.aspx#kehu即可
附截图
基于jquery tab切换(防止页面刷新)
Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
DWR Ext 加载数据
Mar 22 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
利用node.js开发cli的完整步骤
Dec 29 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 #Javascript
js面向对象 多种创建对象方法小结
May 21 #Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
PHP6 先修班 JSON实例代码
2008/08/23 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python如何处理程序无法打开
2020/06/16 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
欢送退休感言
2014/02/08 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL