如何以编程方式切换选项卡 HTML/js

Question

我有一个 HTML 页面，它的水平标签定义如下

<ul class="tabs clear has-borderbottom">
    <li class="js-tab selected" data-tab="tab1"><a href="#">TAB 1</a></li>
    <li class="js-tab" data-tab="tab2"><a href="#">TAB 2</a></li>
    <li class="js-tab" data-tab="tab3"><a href="#">TAB 3</a></li>
 </ul>

当我加载页面时，它会打开 TAB 1，这对我来说在所有情况下都可以。但是在一种情况下，我想将 TAB 2 加载为打开选项卡而不是选项卡 1。如何在 js 中以编程方式执行此操作？

我使用window.location.href = "/details 重定向到上面的 HTML 页面，我想在其中显示默认打开的 TAB 2。

Answer 1

您可以尝试使用 window.location.href = "/details?tab=2" 提供参数。 然后，您可以使用发布在以下位置的函数从 Location 中读取您的 GET-Parameter： How to retrieve GET parameters from javascript?

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
    .substr(1)
        .split("&")
        .forEach(function (item) {
        tmp = item.split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    });
    return result;
}

然后您必须更改文档的选定类加载。 添加一个新的document.onload-Function，像这样：

function doThisOnOnload()
{
  var selected = findGetParameter("tab");
  
  $('.js-tab').removeClass("selected");
  $('[data-tab="tab'+selected+'"]').addClass("selected");
}

因此必须注入 jquery。