Question

引用过去的帖子，发现下面的功能在小提琴中完美无缺，我想要实现的目标，但不是在我当前的实时网站上。是的，jQuery位于我当前站点的标题中。这个奇怪的问题让我疯狂。谢谢你的帮助。

HTML：

<div><a href="#" id="btn">Show bank div and hide fancy div</a></div>
<div id="btn-bk"><a href="#">back</a></div>
<div id="bank">Bank Div</div>
<div id="fancy">Fancy Div</div>

JavaScript的：

$('#btn').click(function(e){    
$('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
});

$('#btn-bk').click(function(e){    
    $('#bank, #btn-bk').fadeOut('slow', function(){
        $('#fancy, #btn').fadeIn('slow');
    });
});

CSS：

#bank {display:none;}
#btn-bk {display:none;}

JSFiddle Demo

Answer 1

12岁，太棒了！但请稍等，不要使用“加载”，“加载”和“准备”不是一回事。 Ready是可供选择的选项，因为它是在加载dom时触发的。（这也是原因之一，因为在身体关闭标记之前包含代码是一种很好的做法。所有的dom都将被处理，所有元素都将在那里，所以不需要使用$（document）.on（“ ready“，function（）{}）如果你把脚本放在文档的末尾）

为了给你完整的工作代码，将是：

$(document).on("ready", function() {

  $('#btn').on("click", function(e){    
    $('#fancy, #btn').fadeOut('slow', function(){
        $('#bank, #btn-bk').fadeIn('slow');
    });
  });

  $('#btn-bk').on("click", function(e){    
      $('#bank, #btn-bk').fadeOut('slow', function(){
          $('#fancy, #btn').fadeIn('slow');
      });
  });

});

我还通过删除.bind和.click（总是，总是使用.on）来改进代码，但请记住，更简洁的方法是将脚本放在文档的末尾，你会避免使用.on（“准备好”。

问候！

Answer 2

我猜你正在使用嵌入式代码，所以请把它包起来：

<script>
    $(function(){
        $('#btn').click(function(e){    
            $('#fancy, #btn').fadeOut('slow', function(){
                $('#bank, #btn-bk').fadeIn('slow');
            });
        });

        $('#btn-bk').click(function(e){    
            $('#bank, #btn-bk').fadeOut('slow', function(){
                $('#fancy, #btn').fadeIn('slow');
            });
        });
    });
</script>

隐藏/显示函数锚点和div

2 个答案: