javascript - Jquery 显示/隐藏按钮在主页上不起作用

Question

我为主页制作了一个显示隐藏代码的小按钮。如果我将该代码放在内部页面中，它可以正常工作，但如果我将它放在主页上，它就不起作用。如果我将 Jquery CDN 放在 header 中，那么我的旋转 slider 将停止工作。

这是我的主页部分，您可以在其中查看代码:

http://www.mythstreet.com/#our-services

这是我的 fiddle ，效果很好:

http://jsfiddle.net/junaidkhawaja/ha6qp7w4/6/

这是我的代码片段: HTML

    <div id="1">
    My Content 1
</div>

<div id="2" style="display:none;">
    My Dynamic Content
</div>

<div id="static" style="display:none;">
    My Static Content
</div>
<button id="btnClick">Click me!</button>
<hr />
<div id="3">
    My Content 1
</div>

<div id="4" style="display:none">
    My Dynamic Content
</div>

<div id="static2" style="display:none;">
    My Static Content
</div>
<button id="btnClick2">Click me!</button>

Javascript:

$( document ).ready(function() {
   $('#btnClick').on('click',function(){
    if($('#1').css('display')!='none'){
    $('#2').html($('#static').html()).show().siblings('#1').hide();
    }else if($('#2').css('display')!='none'){
        $('#1').show().siblings('#2').hide();
    }
});
    $('#btnClick2').on('click',function(){
    if($('#3').css('display')!='none'){
    $('#4').html($('#static2').html()).show().siblings('#3').hide();
    }else if($('#4').css('display')!='none'){
        $('#3').show().siblings('#4').hide();
    }
});
    });

更新:我发现输入这段代码后，我的 slider 无法正常工作。

Answer 1

只要查看您的网站并在控制台中试玩，我就会发现 $ 未定义。

对此的快速修复是更改您的代码以使用 jQuery() 而不是 $(...)

注意:目前无法进一步调试，因为您已经在您的实时网站上修复了代码(万岁!)