2

我正在尝试根据主体的 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，但我不完全确定该怎么做那。

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

4

2 回答 2

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';
        }
    }
}
于 2013-08-19T00:23:50.220 回答
0

这是一个小提琴，它演示了如何使用 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;
}
于 2013-08-19T01:00:04.137 回答