Illuminate the current page

Question

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly and uniformly across all pages.

One issue I'm facing is how to highlight the active page on the side navigation bar. Below is the JS code I am using (W3CSS is utilized for styling):

document.write('<h4>Services:</h4>\
<div class="w3-bar-block w3-light-grey">\
    <a href="/page/7/alternative-dispute-resolution" class="w3-bar-item w3-button">Alternative Dispute Resolution</a>\
    <a href="/page/8/appellate-practice" class="w3-bar-item w3-button">Appellate Practice</a>\
    // More links...
    <a href="/page/27/workmens-compensation" class="w3-bar-item w3-button">Workmens Compensation</a>\
</div>')

HTML:

<div class="w3-display-container w3-content w3-white" id="home" style="min-width:100%;">
    <div class="w3-content w3-white">
        <div class="w3-row">
            <div class="w3-twothird w3-margin-top" style="font-size: 18px; text-align: justify; padding-left: 5%; padding-right: 5%;">
                <p>content</p>
            </div>
            <div class="w3-third w3-padding">
                <script src="services.js"></script>
            </div>

        </div>
    </div>
</div>

javascript jquery html css web

Answer 1

Answer №1

Initially, it's crucial to note that utilizing a synchronous JavaScript file for managing navigation is typically deemed as unwise. In cases where a user accesses your site with JavaScript disabled, the navigation menu wouldn't be visible. A more effective approach would involve integrating a shared navigation template using PHP or another server-side language.

If you absolutely have a requirement to handle it client-side in this fashion, the optimal solution would be to inspect each link within the navigation to determine if it corresponds to location.pathname and then toggle a class accordingly.

// gather all navigation links via a query:
var navLinks = document.querySelectorAll('.w3-bar-block.w3-light-grey a.w3-bar-item.w3-button');

// iterate through the navigation links:
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    // verify whether link path matches current path and apply a class
    if (link.pathname === location.pathname) {
        link.classList.add('w3-green');
    }
}

In an ideal scenario, it would be highly recommended to make the entire navigation system dynamic. Here's a sample implementation:

(function() {
    // store the list of sidebar links as an array of objects:
    var links = [
        {
            url: '/page/7/alternative-dispute-resolution',
            title: 'Alternative Dispute Resolution'
        },
        {
            url: '/page/8/appellate-practice',
            title: 'Appellate Practice'
        },
        {
            url: '/page/9/aviation-law',
            title: 'Aviation Law'
        }
    ];

    // begin constructing the HTML:
    var html = '\
    <h4>Services:</h4>\
    <div class="w3-bar-block w3-light-grey">\
    ';

    // loop through all links and generate their HTML:
    links.forEach(function(link) {
        // initial classes for each link:
        var classes = [
            'w3-bar-item',
            'w3-button'
        ];

        // check if this link is active and add a class
        if (link.url === location.pathname) {
            classes.push('w3-green');
        }

        // append HTML for each link:
        html += '<a href="' +
                link.url +
                '" class="' +
                classes.join(' ') +
                '" title="' +
                link.title +
                '">' +
                link.title +
                '</a>';
    });

    // finish off the HTML structure:
    html += '</div>';

    // render it on the page:
    document.write(html);
})();

Answer 2

Initially, it's crucial to note that utilizing a synchronous JavaScript file for managing navigation is typically deemed as unwise. In cases where a user accesses your site with JavaScript disabled, the navigation menu wouldn't be visible. A more effective approach would involve integrating a shared navigation template using PHP or another server-side language.

If you absolutely have a requirement to handle it client-side in this fashion, the optimal solution would be to inspect each link within the navigation to determine if it corresponds to location.pathname and then toggle a class accordingly.

// gather all navigation links via a query:
var navLinks = document.querySelectorAll('.w3-bar-block.w3-light-grey a.w3-bar-item.w3-button');

// iterate through the navigation links:
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    // verify whether link path matches current path and apply a class
    if (link.pathname === location.pathname) {
        link.classList.add('w3-green');
    }
}

In an ideal scenario, it would be highly recommended to make the entire navigation system dynamic. Here's a sample implementation:

(function() {
    // store the list of sidebar links as an array of objects:
    var links = [
        {
            url: '/page/7/alternative-dispute-resolution',
            title: 'Alternative Dispute Resolution'
        },
        {
            url: '/page/8/appellate-practice',
            title: 'Appellate Practice'
        },
        {
            url: '/page/9/aviation-law',
            title: 'Aviation Law'
        }
    ];

    // begin constructing the HTML:
    var html = '\
    <h4>Services:</h4>\
    <div class="w3-bar-block w3-light-grey">\
    ';

    // loop through all links and generate their HTML:
    links.forEach(function(link) {
        // initial classes for each link:
        var classes = [
            'w3-bar-item',
            'w3-button'
        ];

        // check if this link is active and add a class
        if (link.url === location.pathname) {
            classes.push('w3-green');
        }

        // append HTML for each link:
        html += '<a href="' +
                link.url +
                '" class="' +
                classes.join(' ') +
                '" title="' +
                link.title +
                '">' +
                link.title +
                '</a>';
    });

    // finish off the HTML structure:
    html += '</div>';

    // render it on the page:
    document.write(html);
})();

Illuminate the current page

Answer №1

Similar questions

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

Tips on sending variables to a PHP script from a JQuery $(document).ready function

What is the best method for purging a previously stored variable from the cache when making an Ajax call and simultaneously passing a

Prevent the layout from shifting with CSS

When trying to use ngModel with Angular, an error occurs where the property 'selected' cannot be created on a string

Implementing uniform column width in a Material-UI Grid

Steps to modify the CSS of a custom component in Angular 8

Display a div in JQuery along with all of its associated label elements

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

"Identify the protocol name (string) based on a specific port number in TCP/UDP communication

Adjust the value of an option within a select input using URL parameters

Exploring the process of updating initialState within react-redux

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

send a json response from my webpage

Error: Attempting to access the 'email' property of an undefined element during registration

Where to position a button in the middle of a div that varies in size

The canvas loadFromJson function fails to implement the font-family property

CSS problem: Chrome scrolling overflow glitch (ghost margin/padding)

Place the text below the adaptable div

Keep your eyes peeled for updates in jquery movements