如何切换两种元素同时使用纯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： 编辑：目前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" ];