javascript - 单击主页上所有内容 div 的淡入淡出 JavaScript 函数

Question

我目前正在一个网站上工作，我需要有关不透明度过渡的帮助。我的问题是，我想将我所有的内容 div 放在我的主页上，并根据用户想要的“部分”通过单击我的导航栏(页面顶部)，相应的 div 将淡入，而当前 div 将淡入消退。我考虑过使用 jQuery，但我想我更喜欢自己做。这是我的代码(显然不起作用):

function ShowDiv(id) {
    var activeDiv = document.getElementById(id);
    var divs = document.getElementsByClassName("contentDiv");
    for (var i = 0; i < divs.length; i++) {
        if (divs[i] != activeDiv) {
            divs[i].style.opacity = "0";
            divs[i].style.setProperty("-webkit-transition", "all 1s ease-in-out");
            divs[i].style.display = "none"
        }
    }
    activeDiv.style.position = "block";
    activeDiv.style.opacity = "1";
    activeDiv.style.setProperty("-webkit-transition", "all 1s ease-in-out");
}

当我点击我的导航栏时，该功能被“触发”。根据点击的内容，“id”会有所不同。基本上，我创建了一个包含“需要显示”div 的变量，然后是其他变量。我希望“未选定”div 淡出，然后“选定”div 淡入，但这不起作用。我进行了搜索，但没有找到任何答案，但有趣的是，第一次它会起作用，但第二次、第三次等就不会了。

有什么建议吗？我真的需要使用 jQuery 吗？

Answer 1

听起来和我不久前做过的事情很相似。 (但是我确实选择了 Jquery 路线)因此，如果您决定改变主意，这里有一个 FIDDLE我创建的目的是为了回答另一位发帖人提出的几乎相同的问题。

不要让这吓到你，但它使用:

$('#Hotel, #Meals').on('click', function(){
    var el = $('#'+this.id+'body');
    if ( el.is(':visible') ) return false;
    el.animate({width:'toggle'},1000)
    $('#Mealsbody, #Hotelbody').not(el).hide();
}); 
//#Hotels & #Meals being the ID of the content you want to bring in.
//At the moment it uses .animate, but you could change this to .fadeIn if you wanted to do so

无论如何，如果您决定使用 Jquery，您可以以此为起点。

祝你好运

迈克