Javascript 导航栏链接其他页面上的打开选项卡？

你好，我有一个关于javascript的问题。我在导航栏上有一个菜单链接下拉列表和一个带有选项卡的

technology.php

页面

我在单击菜单时需要它，例如it服务。它将重定向到

technology.php

页面，并打开It服务选项卡的选项卡和内容

我制作了如下的javascript代码。但工作不正常

有什么不对劲还是遗漏了？请帮帮我

导航栏上的链接

<li class="nav-item dropdown" id="technologyMenu">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Solutions
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
         <a class="dropdown-item" href="technology.php">Technology</a>
         <a class="dropdown-item" href="technology.php#datcom">Data Communication & Internet</a>
         <a class="dropdown-item" href="technology.php#it-services">IT Services</a>
         <a class="dropdown-item" href="technology.php#managed-services">Managed Services</a>
         <a class="dropdown-item" href="technology.php#smart-city">Smart City</a>
    </div>
</li>

问题是$（this）.attr（'id'）只返回id，而window.location.hash还包括“#”字符

我简化了一点：

//我必须强制使用一个哈希，以使这里的示例生效
location.hash=“it服务”；
//以及获取我删除的“#”字符的哈希值。这将使事情变得更容易
var hash=window.location.hash.slice（1）；
如果（哈希>“”）{
$（'.tab按钮'）.removeClass（'active'）；
$（“.tab框内容”）.removeClass（'active-block'）；
$（`${hash}`）.addClass（'active'）；
$（`.${hash}`）.addClass（'active-block'）；
}

.active、.active块{
背景：红色；
}

//菜单选项卡
所有技术
数据通信与互联网
IT服务
托管服务
智慧城市
//选项卡内容
技术标签
用于数据通信的选项卡
资讯科技服务标签
托管服务的选项卡
智能城市标签

对于像我这样的动态链接，

location.hash=“it服务”此代码更改为？实际上，我有两个不同的
活动类。选项卡菜单使用
活动
类，而内容使用
活动块
类。我在上面编辑了你的评论，真的是这样吗？差不多！通过您的调整，它将两个类别都添加到两种元素中（虽然有效，但已经足够了）。我又编辑了一遍，它应该正是你想要的
<div class="navigations-tab">
   <div class="menu-tab">
       //Menu Tab
       <div class="tab-button active" id="technology">
            <span>All Technology</span>
       </div>
       <div class="tab-button" id="datcom">
            <span>Data Communication & Internet</span>
       </div>
       <div class="tab-button" id="it-services">
            <span>IT Services</span>
       </div>
       <div class="tab-button" id="managed-services">
            <span>Managed Services</span>
       </div>
       <div class="tab-button" id="smart-city">
            <span>Smart City</span>
       </div>
    </div>

    //Tab Content
    <div class="tab-box-content technology active-block">
       Tab for Tech
    </div>
    <div class="tab-box-content datcom">
       Tab for Data Communication
    </div>
    <div class="tab-box-content it-services">
       Tab for IT Services
    </div>
    <div class="tab-box-content managed-services">
       Tab for Managed Services
    </div>
    <div class="tab-box-content smart-city">
       Tab for Smart City
    </div>
</div>

  var hash = window.location.hash;
  
  if (hash != "") {
    
    $('.tab-button').each(function() {
      $(this).removeClass('active');
    });

    $('.tab-box-content').each(function() {
      $(this).removeClass('active');
    });
    
    var link = "";
    $('.tab-button').each(function() {
      link = $(this).attr('id');
      if (link == hash) {
        $(this).addClass('active');
      }
    });

    $('.tab-box-content').each(function() {
      link = $(this).attr('id');
      if ('.'+link == hash) {
        $(this).addClass('active-block');
      }
    });
  }