Как Переключение двух элементов одновременно с использованием Pure JS

Question

Я пытаюсь выяснить, как переключать одновременно два элемента:

Один элемент замирает в то время как другой затухает-аут, который прекрасно работает, но мне также нужно для изменения/добавления класса к другому элементу. В основном у меня есть навигационное меню, которое скрывает и показывает div, но мне также нужно выделить ссылки и сделать все это в чистом ванильном JavaScript. Я думал [надеяться] выполнить его, используя класс element.toggle.

Любая помощь приветствуется.

HTML:

<div> 
    <section class="" id="home"> 
     <p>...Stuff</p> 
    </section> 

    <section class="" id="about"> 
     <p>...Stuff</p> 
    </section> 

    <section class="" id="contact"> 
     <p>...Stuff</p> 
    </section> 

    <div> 
     <a href="javascript:toggle('home', 'home-btn')" id="home-lnk" class="active">Home</a> 
     <a href="javascript:toggle('about', 'about-btn')" id="about-lnk">About</a> 
     <a href="javascript:toggle('contact', 'contact-btn')" id="contact-lnk">Contact</a> 
    </div> 
</div> 

JavaScript: EDIT:На данный переключатель в DIV, но ссылка выделяет неправильный ссылку

<script type="text/javascript"> 

    var divs = [ "home", "about", "contact" ]; 
    var lnks = [ "home-lnk", "about-lnk", "contact-lnk" ] 

    function toggle(layer) { 
     var d, l 
     for(var i = 0; i < divs.length && lnks.length; i += 1) { 

      d = document.getElementById(divs[i]); 
      d.style.opacity = '0'; 

      l = document.getElementById(lnks[i]); 
      l.className = ''; 
     } 

     d = document.getElementById(layer); 
     d.style.transition = 'opacity 1s'; 
     d.style.opacity = '1'; 

     l = document.getElementById(lnks[i]); 
     l.className += 'active'; 
    } 

</script> 

Answer 1

Легко!

Я пропускал точку с запятой после:

var lnks = [ "home-lnk", "about-lnk", "contact-lnk" ];