简单的jquery事件不起作用

我有一个外部.js文件，我不确定是否是.js错误。简单的jquery事件不起作用

这里是.js文件：（/js/scripts.js）

$(document).ready(function(){ 
    $('#about_link').click(function() { 
     $('.middleface img').css('display','none'); 
     $('.aboutface').css('display',''); 
    }); 
});

我有三个环节（index，about，contact），每个#index_link，分别#about_link & #contact_link。

我试图做的是通过点击关于<a>链接，里面.middlefacediv的形象应该消失，.aboutfacediv应该会出现。

<html lang="en"> 
<head> 
<link rel="stylesheet" href="css/styles.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="js/scripts.js" type="text/javascript"></script> 
</head> 
<body> 
<!-- navigation --> 
<div class="navbar"> 
    <div class="navlinks"> 
     <a type="button" id="index_link">Index</a> 
     <a type="button" id="about_link">About</a> 
     <a type="button" id="contact_link">Contact</a> 
      </div> 
</div> 
<!-- middlecontent --> 
<div class="middleface"> 
    <img id="middle_image" src="images/blabla2.png" alt="blabla"> 
    <!-- aboutpage --> 
      <div class="aboutface"></div> 
    </div> 
</div> 
</body> 
</html>

...和CSS

.middleface { 
    background-image:url('images/blabla1.jpg'); 
    background-size:cover; 
    width:100%; 
} 

#middle_image { 
    height: 230px; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0px; 
} 

.middleface img{} 

.aboutface { 
    display:none; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:grey; 
    width:800px; 
    height:280px; 
}

来源

2013-06-05 user2454367

尝试添加完整路径的jQuery：'http：//ajax.googleapis。COM/AJAX /库/ jQuery的/ 2.0.0/jquery.min.js'。 – 2013-06-05 06:49:57

并确保你的'js'文件夹在你的'html'文件旁边。 – 2013-06-05 06:51:03

尝试：

$(document).ready(function(){ 
    $('#about_link').click(function() { 
     $('.middleface img').css('display','none'); 
     $('.aboutface').css('display','block'); 
     }); 
    });

你也可以使用隐藏和显示：

$(document).ready(function(){ 
    $('#about_link').click(function() { 
     $('.middleface img').hide(); 
     $('.aboutface').show(); 
     }); 
    });

来源

2013-06-05 06:38:51

谢谢你的建议，我复制粘贴它...但它仍然没有工作:(。也许一个CSS/html的问题？ – user2454367

解决方法1：你知道什么，好像jquery链接没有经过， – user2454367

试戴

$(document).ready(function(){ 
$('#about_link').click(function() { 
    $('#middleface').hide(); 
    $('.aboutface').show(); 
}); 
});

您可以使用图像的ID在aboutface格中显示（）行

来源

2013-06-05 06:39:24 Razor

尝试使用的preventDefault（）的链接的点击事件像

$(document).ready(function(){ 
    $('#about_link').click(function(e) { 
     e.preventDefault(); 
     $('#middle_image').css('display','none'); //$('#middle_image').hide(); 
     $('.aboutface').show(); 
    }); 
});

来源

2013-06-05 06:40:22 Gautam3164

你只需显示div使用块。用这个。

$(document).ready(function(){ 
    $(document).on('click','#about_link', function() { 
    $('.middleface img#middle_image').css('display','none'); 
    $('.aboutface').css('display','block'); 
    }); 
});

来源

2013-06-05 06:44:55

解决方法：那么你知道什么，似乎jQuery链接没有经过，之后，一切正常。 – user2454367

这里有一些想法来解决问题：

使用on()功能，而不是click()（推荐here）
附加click事件取消绑定它之前，它避免了奇怪的行为（双重click() s ...）
通过id访问HTML元素比快=>使用#middle_image
要显示元件使用displayblockinline或但最好使用jquery功能hide()或show()或事件fadeIn()和为的效果。

：

$('#about_link').unbind('click').on('click', function() { 
    $('#middle_image').hide(); 
    $('.aboutface').show(); 
});

希望它能帮助！

来源

2013-06-05 06:48:51 rebe100x

谢谢你的提示，非常感谢！ – user2454367

简单的jquery事件不起作用

回答

相关问题