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

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 worklocation.hash = "it-services";// As well as get the hash I remove "#" character. It will make things easiervar hash = window.location.hash.slice(1);if (hash > "") {&nbsp; $('.tab-button').removeClass('active');&nbsp; $('.tab-box-content').removeClass('active-block');&nbsp; $(`#${hash}`).addClass('active');&nbsp; $(`.${hash}`).addClass('active-block');}.active, .active-block {&nbsp; background: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="navigations-tab">&nbsp; &nbsp;<div class="menu-tab">&nbsp; &nbsp; &nbsp; &nbsp;//Menu Tab&nbsp; &nbsp; &nbsp; &nbsp;<div class="tab-button active" id="technology">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>All Technology</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="tab-button" id="datcom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Data Communication & Internet</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="tab-button" id="it-services">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>IT Services</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="tab-button" id="managed-services">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Managed Services</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp;<div class="tab-button" id="smart-city">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Smart City</span>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; //Tab Content&nbsp; &nbsp; <div class="tab-box-content technology active-block">&nbsp; &nbsp; &nbsp; &nbsp;Tab for Tech&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="tab-box-content datcom">&nbsp; &nbsp; &nbsp; &nbsp;Tab for Data Communication&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="tab-box-content it-services">&nbsp; &nbsp; &nbsp; &nbsp;Tab for IT Services&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="tab-box-content managed-services">&nbsp; &nbsp; &nbsp; &nbsp;Tab for Managed Services&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="tab-box-content smart-city">&nbsp; &nbsp; &nbsp; &nbsp;Tab for Smart City&nbsp; &nbsp; </div></div>