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

Question

您好，我有一个关于 javascript 的问题。我在导航栏上有一个菜单链接下拉菜单和一个带有标签的technology.php 页面。

单击菜单时我想要它，例如 IT 服务。它将重定向到 tehcnology.php 页面并打开 IT 服务选项卡的选项卡和内容。

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

有什么问题或遗漏吗？请帮帮我

Menu Dropdown Image

导航栏上的链接

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

Tabs Image

technical.php 页面上的标签

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

我的 Javascript

这适用于所有页面，因此我将此代码放在 footer.php 文件中。我将页眉、页脚等几个部分分开

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

Answer 1

问题是 $(this).attr('id') 只返回 id 而 window.location.hash 还包含“#”字符。

我简化了一点：

// I have to force a hash for the example here to work
location.hash = "it-services";

// As well as get the hash I remove "#" character. It will make things easier
var hash = window.location.hash.slice(1);

if (hash > "") {
  $('.tab-button').removeClass('active');
  $('.tab-box-content').removeClass('active-block');
  $(`#${hash}`).addClass('active');
  $(`.${hash}`).addClass('active-block');
}

.active, .active-block {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>