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，因此它被隐藏了。（我给了一些块进行测试）。

for ctr in range(6):
    print divmod(ctr, 2)

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

使用Jquery切换div

1 个答案: