亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

導航欄鏈接打開其他頁面上的選項卡?

導航欄鏈接打開其他頁面上的選項卡?

一只甜甜圈 2023-03-24 14:43:57
您好,我有一個關于 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 文件中。我將幾個部分分開,例如頁眉,頁腳
查看完整描述

1 回答

?
有只小跳蛙

TA貢獻1824條經驗 獲得超8個贊

問題是 $(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>


查看完整回答
反對 回復 2023-03-24
  • 1 回答
  • 0 關注
  • 92 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號