不久前我问了这个问题 Jquery 选项卡保持选项卡打开,它是 url 中的子 ,你可以看到我找到了我的问题的答案,现在我正在尝试更改它,以便每次您从一个选项卡更改为另一个选项卡时,它都会更改标题中的 tid subid,目前它只是将变量 tid 更改为任何tab_id, 这样当您按返回时,您可以打开您离开的特定选项卡,但这次我希望它在您滚动选项卡时更新标题中的 tid。
如果此处未显示指向我先前答案的链接,这是我的代码
function getParameterByName(name) {
name = name.replace(/['[]/, "'''[").replace(/[']]/, "''']");
var regexS = "[''?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results == null) return "";
else return decodeURIComponent(results[1].replace(/'+/g, " "));
}
$(document).ready(function () {
$(".tab_content").hide(); //Hide all content
var tabIndex = parseInt(getParameterByName('tid'), 10);
if (!tabIndex) tabIndex = 1;
$("ul.tabs li").eq(tabIndex - 1).addClass("active").show(); //Activate first tab
$(".tab_content").eq(tabIndex - 1).show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
如果您需要其他任何东西,请告诉我,如果这有点令人困惑,请道歉。
编辑:换句话说,目前如果我在标题中添加 ?tid=2,那么它将转到第二个选项卡,但当您更改选项卡时它不会自动更新它
尝试使用 Javascript 更改当前 URL 的 tid
参数而不重新加载页面将不起作用。您有以下几种选择:
- 使选项卡实际上只是指向新页面的链接,而不是使用 JavaScript。
-
更改脚本,使选项卡实际上是 id 链接,如下所示:
<li><a href="#inbox" class="inbox"></a></li>
单击选项卡时,应将 #outbox 或 #inbox 追加到您的 URL 中。然后,当用户单击后退按钮时,它应该将他们带到上一个 URL。您还必须更改您的JavaScript,以便当页面加载时带有指向其中选项卡的链接(即page.html#inbox),然后显示收件箱选项卡。
似乎您的 HTML 中已经有了适当的 ID 和链接,但由于某种原因,您正在向 <li>
元素而不是<a>
元素添加单击函数。您应该使<a>
元素具有display:block
,以便它们填满<li>
元素,然后您可以改为向它们添加选项卡切换功能。这将使 id 能够附加到 URL(即 page.html#inbox)。
因此,请尝试将onclick函数添加到您的链接中:
$("ul.tabs li a").click(function () {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).parent().addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).attr("href");
$(activeTab).fadeIn(); //Fade in the active content
});