使用jquery切換div

Question

我對jquery有點新，所以這應該是一個簡單的修復。我只是想切換div。當adserver_b被切換時，我隱藏了廣告服務器。不過，我也需要這個功能。因此，當adserver_b可見時，可以點擊它再次顯示廣告服務器。

<script type="text/javascript"> 
$(document).ready(
function() { 
    $("#ad_server").click(function() { 
     $("#ad_serverb").fadeToggle(); 
    }); 
}); 

<div id="adserver_contain"> 
<div id="ad_server"><img src="Images/Adserver_roll.png"></div> 
</div> 

<div id="ad_serverb"><img src="Images/Adserver.png"></div> 

</div> 

Answer 1

我設置#ad_serverb顯示爲none所以它是隱藏的。 （我給塊測試了一些樣式）。

$(document).ready(function() { 
 
    $("#ad_server").click(toggleAdServers); 
 
    $("#ad_serverb").click(toggleAdServers); 
 
}); 
 

 
function toggleAdServers(){ 
 
    $("#ad_server").fadeToggle(); 
 
    $("#ad_serverb").fadeToggle(); 
 
}

#ad_server, #ad_serverb{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #00F; 
 
} 
 
#ad_serverb{ 
 
    background: #F00; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="adserver_contain"> 
 
<div id="ad_server"><img src="Images/Adserver_roll.png"></div> 
 
</div> 
 

 
<div id="ad_serverb"><img src="Images/Adserver.png"></div>

編輯：多個元素

$(document).ready(function() { 
 
    $(".toggleElements").each(function() { 
 
    var parent = $(this); 
 
    $(this).find(".first").click(function() { 
 
     $(this).fadeToggle(); 
 
     $(parent).find(".second").fadeToggle(); 
 
    }); 
 
    $(this).find(".second").click(function() { 
 
     $(this).fadeToggle(); 
 
     $(parent).find(".first").fadeToggle(); 
 
    }); 
 
    }); 
 
});

.toggleElements { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.first, 
 
.second { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #00F; 
 
} 
 
.second { 
 
    background: #F00; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div> 
 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div> 
 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div>