jQuery/Javascript的淡入div onclick淡出另一個不起作用

Question

我想彈出一個菜單點擊一個div和我得到它在這個小提琴的所有工作：http://jsfiddle.net/EhtrR/825/但我不能設法使它工作我的代碼。

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

它不會顯示任何東西，當我把它放在我的代碼。

Answer 1

添加這個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="http://code.jquery.com/jquery-1.11.0.js"></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庫。我添加了它。

<script src="http://code.jquery.com/jquery-1.11.0.js"></script> 

使用它應該可以解決你的問題。