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

Question

您好，我有一个关于 javascript 的问题。我在导航栏上有一个菜单链接下拉菜单和一个technology.php带有选项卡的页面。单击菜单时我需要它，例如 IT 服务。它将重定向到tehcnology.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>标签图片technology.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>这适用于所有页面，所以我将这段代码放在 footer.php 文件中。我将几个部分分开，例如页眉，页脚

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>