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

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

1 个答案: