使用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>