根据主体id将类添加到元素中

Add class to element based on body id

本文关键字：添加 元素 主体 id      更新时间：2023-09-26

我正在尝试根据主体的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"标签，因为可能有更多的a元素具有相同的链接，我只需要将类添加到"nav"div中的链接中，但我不确定如何做到这一点。

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

这可能会为您指明正确的方向。

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

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

然后更改你的导航链路阵列，以执行相同的

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

这里有一个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;
}
相关文章：