4

前段时间我问了这个问题Jquery tabs keep tab open that is subid in 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 那么它将转到第二个选项卡，但是当您更改选项卡时它不会自动更新它

4

1 回答 1

5

尝试tid使用 Javascript 更改当前 URL 的参数而不重新加载页面将不起作用。你有几个选择：

  1. 使选项卡实际上只是指向新页面的链接，而不是使用 JavaScript。

  2. 更改您的脚本，使选项卡实际上是 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
    });
于 2012-07-02T23:50:01.537 回答