0

当另一个 div 可见时，我试图隐藏一个 div。

我有 div 1 和 div 2。

如果显示 div 2，则 div 1 应隐藏，如果未显示 div 2，则 div 1 应可见/取消隐藏。

该功能需要在页面加载时准备好功能/文档。

我已经尝试过了，但我没有任何运气，有人可以告诉我如何做到这一点。

<script>
    window.onLoad(function () {
        if ($('.div2').is(":visible")) {
             $(".div1").fadeOut(fast);

        } else if ($('.div2').is(":hidden")) {
            $('.div1').fadeIn(fast);

        }
    });
</script>
4

4 回答 4

3

为每个 div添加一个类hidden，然后使用 jQuery 在该类之间切换。顺便说一句，window.onload它不是一个函数，它需要一个像window.onload = function() {}. 另外，加fast引号。我不知道这是否是必需的，但 jQuery 就是这么说的。

<div class="div1"></div>
<div class="div2 hidden"></div>

.hidden { display: none }

$(document).ready(function() {

    if($(".div1").hasClass("hidden")) {
        $(".div2").fadeIn("fast");
    }

    else if($(".div2").hasClass("hidden")) {
        $(".div1").fadeIn("fast");
    }

});
于 2013-02-04T02:19:34.473 回答
0

您应该将字符串传递给.fadeIn()and.fadeOut()方法。

取而代之的.fadeIn(fast)是.fadeIn("fast"). 对.fadeOut().

一般来说，既然您已经在使用 jQuery，最好像这样包装您的代码：

$(function () {
    // Code goes here
});
于 2013-02-04T02:22:10.337 回答
0

您可以使用 setTimeout 或 setInterval 来跟踪这些 div 是否存在

$(function() {
  var interval = window.setInterval(function() {
    if($('#div2').hasClass('showing')) {
      $('#div1').fadeOut('fast');
    }      
    if($('#div2').hasClass('hidden')) {
      $('#div1').fadeIn('fast');
    }
  }, 100);

  // when some time u don't want to track it
  // window.clearInterval(interval)
})

为了更好的性能

var div1 = $('#div1')
  , div2 = $('#div2')


var interval ....
// same as pre code
于 2013-02-04T02:22:37.203 回答
0

看起来您正在使用 jquery 选择器（一个 javascript 库）。如果您要使用 jquery，请确保通过将其包含在文档标题中来正确加载库（谷歌通过为您托管它使这很容易
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>）

加载 jQuery 后，您可以这样做

$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}

else if ($('.div2').is(":visible")) {
$('div1').hide();
}

});

工作示例： http: //jsfiddle.net/HVDHC/ - 只需将 display:none 从 div 2 更改为 div 1 并单击“运行”以查看它的替代。

于 2013-02-04T02:26:08.607 回答