Active in front-end (active menu)
Ví dụ dụ có đoạn menu html:
<div class="banner-links">
<ul>
<li id="index"><a href="index.jsp">Những người bạn</a></li>
<li id="video"><a href="video.jsp">Video hành trình</a></li>
<li id="lienhe"><a href="lien-he.jsp">Liên hệ</a></li>
<div class="clearfix"></div>
</ul>
</div>
Tại mỗi trang đặt đoạn sau:
<script>
document.getElementById("index").classList.add('active');
// document.getElementById("video").classList.add('active');
// document.getElementById("lienhe").classList.add('active');
</script>
Cách khác:
<div class="banner-links">
<ul>
<li id="index"><a href="<%=request.getContextPath()%>/BaiTap2/index.jsp">Những người bạn</a></li>
<li><a href="<%=request.getContextPath()%>/BaiTap2/video.jsp">Video hành trình</a></li>
<li><a href="<%=request.getContextPath()%>/BaiTap2/lien-he.jsp">Liên hệ</a></li>
<div class="clearfix"></div>
</ul>
</div>
$(document).ready(function () {
$('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});