單擊主頁上所有內容div的Fade In和Fade Out 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，則可以以此為起點。

祝好運，

麥克風

Answer 2

的HTML

<ul>
    <li><a href="#" rel="0" onClick="ShowDiv(this.rel)">a</a></li>
    <li><a href="#" rel="1" onClick="ShowDiv(this.rel)">b</a></li>
    <li><a href="#" rel="2" onClick="ShowDiv(this.rel)">c</a></li>
</ul>
<div class="contentDiv" id="1">1</div>
<div class="contentDiv" id="2">2</div>
<div class="contentDiv" id="3">3</div>

的CSS

.contentDiv {
    width:100px;
    height: 100px;
    background: #333;
    margin-bottom: 5px;
    color: #fff;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}
.remove {
    opacity: 0;
    height:0;
    line-height:0;
    padding:0;
    border:none;
}

Java腳本

function ShowDiv(id) {
    var activeDiv = document.getElementById(id);
    var divs = document.getElementsByClassName("contentDiv");
    for (var i = 0; i < divs.length; i++) {
        if (i != id) {
            divs[i].classList.add('remove');
        }else {
           divs[i].classList.remove('remove');
        }
    }
}

工作演示