基于jquery tab切换(防止页面刷新)_jquery
程序员文章站
2022-04-29 22:15:34
...
在网上找了很多jquery效果,都是这样的,于是自己写了一个。防止页面刷新的tab切换,
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即可
附截图
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即可
附截图
上一篇: 迁移mysql分区_MySQL
推荐阅读
-
基于jquery的图片轮播 tab切换组件
-
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题_jquery
-
基于jquery的防止大图片撑破页面的实现代码(立即缩放)_jquery
-
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题_jquery
-
基于jquery的图片轮播 tab切换组件_jquery
-
基于jquery tab切换(防止页面刷新)_jquery
-
基于jquery的图片轮播 tab切换组件_jquery
-
基于jquery的防止大图片撑破页面的实现代码(立即缩放)_jquery
-
基于jquery的tab切换 js原理_jquery
-
基于jquery tab切换(防止页面刷新)_jquery