jQuery/Javascript - 淡入 div onclick 淡出另一个不起作

jQuery/Javascript - Fade in div onclick fade out another doesn#39;t work(jQuery/Javascript - 淡入 div onclick 淡出另一个不起作用)

问题描述

我想在单击 div 时弹出一个菜单，我在这个 Fiddle 中完成了所有工作:http://jsfiddle.net/EhtrR/825/ 但我无法让它在我的代码上运行.

I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.

HTML:

<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div  id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>

CSS:

    #leafyPlants{
        display:none;
        position:absolute;
        top:50px;
    }

#juicyPlants{
    display:none;
    position:absolute;
    top:50px;
}

jQuery:

  $("#clickOne").on('click', function() {
   $("#leafyPlants").fadeIn();
   $("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
   $("#leafyPlants").fadeOut();
   $("#juicyPlants").fadeIn();
});

当我把它放在我的代码中时它没有显示任何东西.

It doesn't show anything when I put it my code.

推荐答案

添加这个css

<style>
img {
    float: left;
    display: block;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#img1 {
    background: #b00;
}
#img2 {
    background: #c00;
}
#div1 {
    display: none;
    position: absolute;
    top: 50px;
    width: 200px;
    background: #077;
    left: 10px;
}
#div2 {
    display: none;
    position: absolute;
    top: 50px;
    width: 200px;
    background: #0b0;
    left: 10px;
}
br {
    clear: both;
}
</style>

这个js代码

<script src="aHR0cDovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMS4xMS4wLmpz"></script>
<script>
$(document).ready(function(e) {
    $("#img1").on('click', function() {
   $("#div1").fadeIn();
   $("#div2").fadeOut();
});

$("#img2").on('click', function() {
   $("#div1").fadeOut();
   $("#div2").fadeIn();
});
});
</script>

还有你的 HTML

<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>

它应该工作.很可能您没有包含 jQuery 库.我添加了它.

It should work. Most probably you did not included jQuery library. I added it.

<script src="aHR0cDovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMS4xMS4wLmpz"></script>

使用它应该可以解决你的问题.

Using it should solve your porblem probably.

这篇关于jQuery/Javascript - 淡入 div onclick 淡出另一个不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！