添加類到基於身體標識的元素

我想添加一個類到特定的列表元素基於身體的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，但我米並不確定如何做到這一點。

任何幫助或鏈接到相關的文件將非常感激

來源

2013-08-19 Jawwad Zakaria

這是否意味着'了'body'的id'屬性將在不同的時間發生變化？你有多個'body'元素嗎？或者你是在設計幾個頁面，並在每個頁面的「body」中應用不同的'id'？ – abiessu

這個腳本將被幾個頁面使用，每個頁面都有一個單獨的ID作爲其正文元素 –

這可能意味着你進入了正確的方向。

首先，改變你的導航欄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-19 00:23:50 federicot

謝謝！這工作。我甚至進一步提出了一個一致的命名約定，其中body id與鏈接的href（減去任何擴展名或前綴url）完全相同。這消除了「if（bodyId ==='contact'）」語句的需要 –

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

來源

2013-08-19 01:00:04

添加類到基於身體標識的元素

回答

相關問題