如何以编程方式切换标签HTML/js

How to switch tabs programmatically HTML/js

本文关键字：HTML js 切换标签 方式 编程      更新时间：2023-09-26

我有一个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默认打开

您可以尝试使用window.location.href ="/details?tab=2"给出一个参数。然后你可以读取你的get参数的位置与函数发布在:如何从javascript检索GET参数?

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;
}

然后您必须更改文档的selected-Class加载。添加一个新文档。onload-Function，像这样:

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

相关文章：