[英]Change menu item color using javascript and jquery
我有一個 function 可以單擊更改菜單項的顏色。 這工作正常,但不知何故我把它弄壞了,不知道怎么弄。
單擊時菜單項顏色不會改變。 沒有錯誤。
我正在 Chrome 上進行測試。 它不適用於生產或本地主機。
我想我一定在某處缺少 jQuery 腳本......任何想法都值得贊賞......
Header:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="~/css/style.css" />
身體:
<div class="navbar-collapse collapse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item" onclick="changeactive('Home')">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">@_loc[Model.NavBarHome]</a>
</li>
<li class="nav-item" onclick="changeactive('Features')">
<a class="nav-link" asp-area="" asp-controller="Features" asp-action="Features">@_loc[Model.NavBarFeatures]</a>
</li>
</div>
CSS:
.normal-item {
color: green !important;
}
.active-item {
color: rgba(255, 140, 0, 0.781) !important
}
JS:
function changeactive(pname) {
Debug.writeln("hello");
sessionStorage.setItem("activepage", pname);
}
$(function () {
var pname = sessionStorage.getItem("activepage");
switch (String(pname)) {
case "Home":
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("active-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
break;
case "Features":
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("active-item");
break;
default:
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
break;
}
})
1) 第一次運行此代碼時,pname 將未定義或為空。
2)你有一個 onclick 處理程序,但你的代碼的主要邏輯不是 function,所以它只會運行一次 - 你根本沒有觀察到 sessionStorage1s 值的變化。
3)重構您的代碼以在 function 中具有更改邏輯,並在 changeactive fn 中調用該 function。
$(function () {
function updateUI()
{
var pname = sessionStorage.getItem("activepage");
switch (String(pname)) {
case "Home":
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("active-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
break;
case "Features":
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("active-item");
break;
default:
$("ul.navbar-nav li.nav-item:nth-child(1) a").addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").addClass("normal-item");
break;
}
}
function changeactive(pname) {
Debug.writeln("hello");
sessionStorage.setItem("activepage", pname);
updateUI();
}
});
<div class="navbar-collapse collapse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" data-pname="Home" asp-area="" asp-controller="Home"
asp-action="Index">@_loc[Model.NavBarHome]</a>
</li>
<li class="nav-item">
<a class="nav-link" data-pname="Features" asp-area="" asp-controller="Features"
asp-action="Features">@_loc[Model.NavBarFeatures]</a>
</li>
</div>
$(function () {
var navBar = $('.navbar-nav');
navBar.on('click', function (e) {
var pname = e.target.dataset['pname'];
changeactive(pname);
})
function changeactive(pname) {
switch (String(pname)) {
case "Home":
$("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('normal-item').addClass("active-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('active-item').addClass("normal-item");
break;
case "Features":
$("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('active-item').addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('normal-item').addClass("active-item");
break;
default:
$("ul.navbar-nav li.nav-item:nth-child(1) a").removeClass('active-item').addClass("normal-item");
$("ul.navbar-nav li.nav-item:nth-child(2) a").removeClass('active-item').addClass("normal-item");
break;
}
}
});
如果使用 addClass,則新的 class 將添加到已應用於元素的現有 class 之上。 因此,您最終可能會在同一元素上使用“normal-item”和“active-item”。 這可能會導致意外行為。
建議您使用.css({class:"nav-link normal-item"}) 或.css({class:"nav-link active-item"}) 確保只添加一個適用的類。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.