Tengo una página jsp para la barra lateral a la que me gustaría agregar una clase de acción cuando alguien haga clic en ella. Estoy tomando las instrucciones de w3schools.com. link = https://www.w3schools.com/howto/howto_js_active_element.asp pero no estoy seguro de cómo modificarlo para que coincida con mi código, ya que soy un novato de JavaScript. ¿Alguna sugerencia?
<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>Reemplazar
var btns = header.getElementsByTagName("presentation");con
const btns = header.querySelectorAll("li[role=presentation]");https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Identificación agregada para cada artículo como este
<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>y agregué este código 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...