基于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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
JavaScript错误处理操作实例详解
Jan 04 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php使用session二维数组实例
2014/11/06 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
wxPython中文教程入门实例
2014/06/09 Python
浅谈Python中数据解析
2015/05/05 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
基于Python函数和变量名解析
2019/07/19 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
打架检讨书100字
2014/01/08 职场文书
超市采购员岗位职责
2014/02/01 职场文书
创先争优宣传标语
2014/10/08 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
暑假打工感想
2015/08/07 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
十个Python自动化常用操作,即拿即用
2021/05/10 Python