根据body id将类添加到元素

Question

我正在尝试根据正文的id为特定的列表元素添加一个类，但我不知道该怎么做。

这是我到目前为止所拥有的：

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

我正在努力做的是，如果身体身份是例如“contact”，我希望包含“#contact”链接的list元素包含“active”类。

我真的不能只搜索所有“a”标记，因为可能有更多元素具有相同的链接，我只需要将类添加到“{{1}中的链接}“nav，但我不确定该怎么做。

非常感谢任何帮助或指向相关文档的链接

Answer 1

这可能会指向正确的方向。

首先，将导航栏HTML更改为具有类参数

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

然后更改您的navlinks数组以执行相同的操作

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

然后

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

Answer 2

Here's a fiddle演示了如何使用Mustache的{{#if}}指令，并简单地枚举链接并将它们与正文的id进行比较。

修改

代码：

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