lamngockhuong
5/31/2017 - 10:11 AM

Active in front-end (active menu)

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');
});