链接重定向后如何设置活动组项？答案

【问题标题】：How to set active group-item after link redirect?链接重定向后如何设置活动组项？
【发布时间】：2022-01-21 16:46:20
【问题描述】：

当用户被重定向时，我试图在另一个页面上设置一个活动组项。我怎样才能做到这一点？第二页有两种状态。我希望第二组选项卡仅在用户通过下面的 jQuery 函数重定向时才处于活动状态。

HTML：

div class="card overflow-hidden">
                <div class="row no-gutters row-bordered row-border-light">
                    <div class="col-md-3 pt-0">
                        <div class="list-group list-group-flush group-settings-links">
                            <a class="list-group-item list-group-item-action active in" id="tabonetoggle" data-toggle="list" href="#tabone">Group tab 1</a>
                            <a class="list-group-item list-group-item-action" id="tabtwotoggle" data-toggle="list" href="#tabtwo">Group tab 2</a>
                        </div>
                    </div>

JQuery:

      $('#first-group-tab').removeClass('active');
      $('#second-group-tab').addClass('active');
      window.location.href = base_url + "testurl.html";

现在，当我在 url 栏中输入 testurl.html#second-group-tab 或 testurl.html#tabtwo 时，它甚至不会将第二个选项卡显示为活动状态，只有当我手动单击选项卡时它才会显示为活动状态

【问题讨论】：

如果您觉得有用，请验证我的答案。谢谢

标签： javascript html jquery twitter-bootstrap

【解决方案1】：

注意IDS。 IDS 必须是唯一的！

https://www.w3schools.com/html/html_id.asp

我将您的 ID 名称更改为 first-group-tab 和 第二组标签。

在您的第一个 html 文件中，您需要使用第二个选项卡的哈希设置链接

$("#second-group-tab").click(function() {
  window.location.href = base_url + "testurl.html#second-group-tab";
});

.active { color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card overflow-hidden">
  <div class="row no-gutters row-bordered row-border-light">
      <div class="col-md-3 pt-0">
          <div class="list-group list-group-flush group-settings-links">
              <a class="list-group-item list-group-item-action active in" id="first-group-tab" data-toggle="list" href="#tabone">Group tab 1</a>
              <a class="list-group-item list-group-item-action" id="second-group-tab" data-toggle="list" href="#tabtwo">Group tab 2</a>
          </div>
      </div>
   </div>
</div>

在第二个文件“testurl.html”中，获取哈希值，然后选择类名为“active”的右侧选项卡。

https://developer.mozilla.org/en-US/docs/Web/API/Location/hash

$(function() {
  // we get hash value 
  var hashValue = location.hash;
  
  hashValue = "#second-group-tab"; // this line is for test only
  
  // we check if the hash value is egal to your second tab name
  if (hashValue == "#second-group-tab") { 
    $(".list-group-item").removeClass("active");
    $(hashValue).addClass("active");
  }
});

.active { color:red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card overflow-hidden">
  <div class="row no-gutters row-bordered row-border-light">
      <div class="col-md-3 pt-0">
          <div class="list-group list-group-flush group-settings-links">
              <a class="list-group-item list-group-item-action active in" id="first-group-tab" data-toggle="list" href="#tabone">Group tab 1</a>
              <a class="list-group-item list-group-item-action" id="second-group-tab" data-toggle="list" href="#tabtwo">Group tab 2</a>
          </div>
      </div>
   </div>
</div>

在您进行测试之前删除此行：hashValue = "#second-group-tab"; // this line is for test only

【讨论】：