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;
}

<强>的Javascript

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');
        }
    }
}

<强> Working Demo

单击主页上所有内容div的淡入和淡出JavaScript功能

2 个答案: