CODEWITHSUNDEEP
javascripthtmlcssweb
bothsworth
bothsworth

Reputation: 11

Navbar active page

I have this one problem regarding the highlighted navbar menu which will only highlight when we clicked on it. For that to work, I'm using javascript. However, each pages has its own sub pages, for example, page Home has a link of local/home, but its content will lead to local/home/content. The sub link will not make the navbar to function The navbar was coded in different file, which I just extends in the home and other pages. I'm not very good at explaining but if I can elaborate more on any part I would do so. Below I attached my JS and my navbar:

Navbar :

        <ul class="navbar-nav mr-auto" id="nav">
            <li class="nav-item">
                <a class="nav-link active" href="{{ url('/') }}">Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('courses') }}">opportunities</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('events') }}">events</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('uqalc') }}">courses</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('contact') }}">contact</a>
            </li>
        </ul>

Javascript :

const currloc = location.href;
        const menuItem = document.querySelectorAll('a');
        const menuLen = menuItem.length;
        for (let i = 0; i < menuLen; i++) {
            menuItem[i].classList.remove('active');
            if (menuItem[i].href === currloc) {
                menuItem[i].className = "nav-link active";
            }
        }

Upvotes: 1

Views: 1069

Answers (1)

Hiren Devganiya
Hiren Devganiya

Reputation: 359

Here, I add active class to the anchor tag which is inside .navbar-nav If the window location is https://www.google.com/index.html

then this code find an anchor tag which one inside the .navbar-nav if anchor tag href should be index.html then this code add class active to the anchor tag

    function removeQueryString(url) {
        return url.split('?')[0]
    }
    [].forEach.call(document.querySelectorAll('.navbar-nav a'), function(elem) {
        if (removeQueryString(elem.href) === removeQueryString(window.location.href))
        elem.classList.add('active')
        else
        elem.classList.remove('active')
    })

Upvotes: 1

Related Questions