根据正文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;
});

我要尝试做的就是，如果正文ID例如是“ contact ”，我希望包含指向“ #contact ”链接的列表元素具有一个“ active ”类。

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

任何帮助或相关文档的链接将不胜感激

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

这是一个小提琴 ，它演示了如何使用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;
}