欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

基于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即可
附截图
基于jquery tab切换(防止页面刷新)_jquery
相关标签: jquery tab切换