CODEWITHSUNDEEP
javascripthtml
Jawwad Zakaria
Jawwad Zakaria

Reputation: 1159

Add class to element based on body id

I'm trying add a class to a particular list element based on the id of the body but am not sure how to do so.

Here's what I have so far:

document.addEventListener("DOMContentLoaded", function() {
    var navbar = "<div class='nav'><ul class='nav'>{{#each links}}<li><a href='#{{link}}'>{{name}}</a></li>{{/each}}</ul></div>"
    template_nav = Handlebars.compile(navbar);
    var navlinks = [{link:"home", name:"Home"},{link:"about", name:"About Us"}, {link:"contact", name:"Contact Us"}];

    document.querySelector("#nav").innerHTML = template_nav({links: navlinks});
    var bodyId = document.body.id;
});

What I'm trying to do exactly is that if the body id is e.g. "contact", I want the list element containing the link to "#contact" to have a class "active".

I can't really just search through all the "a" tags, because there may be more a elements with the same links and I only need to add the class to links in the "nav" div, but I'm not exactly sure how to do that.

Any help or links to relevant documentation would be really appreciated

Upvotes: 2

Views: 195

Answers (2)

Travis Kaufman
Travis Kaufman

Reputation: 2937

Here's a fiddle that demonstrates how you could do this using Mustache's {{#if}} directive combined with simply enumerating over the links and comparing them to the id of the body.

EDIT

Code:

var navbar = '<div class="nav">' +
                '<ul class="nav">' +
                    '{{#each links}}' +
                        '<li>' +
                            '<a href="#{{link}}" {{#if active}}class="active"{{/if}}>{{name}}</a>' +
                        '</li>' +
                    '{{/each}}' +
                '</ul>' +
            '</div>';
var template_nav = Handlebars.compile(navbar);
var navlinks = [
    {link:"home", name:"Home"},
    {link:"about", name:"About Us"}, 
    {link:"contact", name:"Contact Us"}
];

var bodyId = document.body.id;

findActiveLink(navlinks, bodyId).active = true;
document.querySelector("#nav").innerHTML = template_nav({links: navlinks});

function findActiveLink(navlinks, identifier) {
    var active = {};
    var i;
    for (var i = 0, l = navlinks.length; i < l; i++) {
        if (navlinks[i].link === identifier) {
            active = navlinks[i];
            break;
        }
    }

    return active;
}

Upvotes: 0

federicot
federicot

Reputation: 12341

This might point you into the right direction.

First, change your navbar HTML to have a class parameter

var navbar = "
    <div class='nav'>
        <ul class='nav'>
        {{#each links}}
            <li class={{className}}>
                      ^^^^^^^^^^^^^
                <a href='#{{link}}'>{{name}}</a>
            </li>
        {{/each}}
        </ul>
    </div>";

Then change your navlinks array to do the same

var navlinks = [
    {className: '', link: 'home', name: 'Home'},
     ^^^^^^^^^^^^^
    {className: '', link: 'about', name: 'About Us'},
     ^^^^^^^^^^^^^
    {className: '', link: 'contact', name: 'Contact Us'}
     ^^^^^^^^^^^^^
];

Then

if (bodyId === 'contact') {
    var i = 0;
    for (i; i < navlinks.length; i += 1) {
        if (navlinks[i].link === 'contact') {
            navlinks[i].className = 'active';
        }
    }
}

Upvotes: 1

Related Questions