如何 - 將活動 Class 添加到當前元素
[英]How TO - Add Active Class to Current Element
問題描述
我有一個側邊欄的 jsp 頁面，我想在有人點擊它時添加一個動作 class 。 我正在接受 w3schools.com 的指示。 鏈接 = https://www.w3schools.com/howto/howto_js_active_element.asp但我不確定如何更改它以匹配我的代碼，因為我是 javascript 新手。 有什么建議么？
<body>
<div class="col-md-3" id="DIV">
<ul class="nav nav-pills nav-stacked hidden-sm hidden-xs">
<li role="presentation" class="active"><a href="${webHome}/home">Dashboard</a></li>
<li role="presentation"><a href="${webHome}/task">Task List</a></li>
<li role="presentation" >
<a href="${webHome}/app?domainId=${userSession.domainId}">Applications</a>
</li>
</ul>
</div>
<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("DIV");
var btns = header.getElementsByTagName("presentation");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
2 個解決方案
解決方案1
1 已采納 2022-01-10 12:30:37
代替
var btns = header.getElementsByTagName("presentation");
和
const btns = header.querySelectorAll("li[role=presentation]");
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
解決方案2
0 2022-01-11 13:54:49
像這樣為每個項目添加 id
<li role="presentation" id="navDashboard"><a href="${webHome}/home">Dashboard</a></li>
<li role="presentation" id="navTaskList"><a href="${webHome}/task">Task List</a></li>
並添加了這個 javascript 代碼
const pathDashboard='/web/home';
const pathTaskList='/web/task';
const pathApplications ='/web/app';
var path = window.location.pathname;
if(path===pathDashboard){
$('#navDashboard').each(function () {
$(this).addClass('active');
});
}
if(path===pathTaskList){
$('#navTaskList').each(function () {
$(this).addClass('active');
});
}
and so on...
將活動 Class 添加到當前元素 - 在多個 ID 和 class 之間
[英]Add Active Class to Current Element - Between multiple IDs and class
在Bootstrap 4中的滑塊導航中，如何將“活動”類添加到當前選項卡？
[英]In a slider navigation in Bootstrap 4, how to add the “active” class to the current tab?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.