如何使用纯 JS 同时切换两个元素

Question

我想知道如何同时切换两个元素：

一个元素淡入而另一个元素淡出效果很好，但我还需要 change/add 一个 class 到另一个元素。基本上我有一个隐藏和显示 div 的导航菜单，但我还需要突出显示 link 并在纯香草 JavaScript 中完成所有操作。我在想 [希望] 使用 element.toggle class.

来执行它

感谢任何帮助。

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 的切换但 link 突出显示错误 link

<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" ];

如何使用纯 JS 同时切换两个元素

How to Toggle Two Elements Simultaneously Using Pure JS

javascript

toggle