[英]Navbar links opening tabs on other pages?
您好,我有一個關於 javascript 的問題。 我在導航欄上有一個菜單鏈接下拉菜單和一個帶有標簽的technology.php
頁面。
當我單擊菜單時,我想要它,例如 IT 服務。 它將重定向到tehcnology.php
頁面並打開 IT Services 選項卡的選項卡和內容。
我已經制作了如下的 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>
<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');
}
});
}
問題是 $(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.