Jquery显示/隐藏按钮不在主页上工作

时间:2014-09-09 20:23:43

标签: javascript jquery html css

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

在我的主页部分,您可以看到代码:

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

这是我的小提琴,工作得很好:

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

更新:我发现在使用此代码后,我的滑块也无效。

2 个答案:

答案 0 :(得分:1)

只需查看您的网站并在控制台中玩游戏,我就可以看到$未定义。

快速解决此问题的方法是将代码更改为使用jQuery()代替$(...)

注意:目前无法进一步调试,因为您已修复了现场网站上的代码(万岁!)

答案 1 :(得分:0)

查看代码,在第一行您会错过$

这一个:

$( document ).ready(function()

应该是:

jQuery( document ).ready(function($)