CODEWITHSUNDEEP
javascripthtml
Doyel Mishra
Doyel Mishra

Reputation: 330

How TO - Add Active Class to Current Element

I have a jsp page for the sidebar that I'd like to add an action class to when someone clicks on it. I'm taking the instructions of w3schools.com. link = https://www.w3schools.com/howto/howto_js_active_element.asp but I'm not sure how to alter it to match my code I'm as I'm a javascript newbie. Any suggestions?


<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>

Upvotes: 3

Views: 1133

Answers (2)

Doyel Mishra
Doyel Mishra

Reputation: 330

Added id for each item like this

        <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>

and added this javascript code

    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...

Upvotes: -1

connexo
connexo

Reputation: 56843

Replace

var btns = header.getElementsByTagName("presentation");

with

const btns = header.querySelectorAll("li[role=presentation]");

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

Upvotes: 1

Related Questions