简单Jquery事件不起作用_Jquery_Html_Css

简单Jquery事件不起作用

jquery html css

简单Jquery事件不起作用,jquery,html,css,Jquery,Html,Css,我有一个外部.js文件，我不确定它是否是.js故障这是.js文件：（/js/scripts.js）我有三个链接（索引，关于，联系），每个链接分别是\index\u链接，\about\u链接，\contact\u链接）我试图做的是单击About链接，中间面div中的图像应该消失，而.aboutfacediv应该出现 <html lang="en"> <head> <link rel="stylesheet" href="css/styles.css"> &

我有一个外部

.js

文件，我不确定它是否是

.js

故障

这是

.js

文件：（

/js/scripts.js

）

我有三个链接（

索引

，

关于

，

联系

），每个链接分别是

\index\u链接

，

\about\u链接

，

\contact\u链接

）

我试图做的是单击About

链接，中间面

div
中的图像应该消失，而.aboutface
div

应该出现

<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>

尝试：

您还可以使用隐藏和显示：

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

尝试：

您还可以使用隐藏和显示：

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

试一试-

您可以在show（）行的aboutface div中使用图像的id-

您可以在show（）行的aboutface div中使用图像的id，尝试使用preventDefault（）作为链接的单击事件，如

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

尝试对链接的单击事件使用preventDefault（），如

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

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

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

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

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

以下是一些解决问题的方法：

使用on（）
功能代替

单击（）

（推荐）

在附加click事件解除绑定之前，它可以避免奇怪的行为（双击

click（）

s…）

按id访问HTML元素比

快。middleface img

=>使用

#middle_image

要显示元素，请使用

display

block

或

inline

，但最好使用jquery函数

hide（）

或

show（）

或事件

fadeIn（）

和

fadeOut（）

希望有帮助

以下是一些解决问题的方法：

使用on（）
功能代替

单击（）

（推荐）

在附加click事件解除绑定之前，它可以避免奇怪的行为（双击

click（）

s…）

按id访问HTML元素比

快。middleface img

=>使用

#middle_image

要显示元素，请使用

display

block

或

inline

，但最好使用jquery函数

hide（）

或

show（）

或事件

fadeIn（）

和

fadeOut（）

希望有帮助

谢谢你的建议，我复制粘贴了它…但它仍然不起作用：（.可能是css/html问题？解决了：好吧，你知道吗，似乎jquery链接没有通过，之后一切正常。谢谢你的建议，我复制粘贴了它…但它仍然不起作用：（.可能是css/html问题？已解决：您知道吗，在一切正常后，jquery链接似乎没有通过。请尝试使用完整路径添加jquery:

http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

。并确保您的

js

文件夹位于

html

文件旁边。尝试添加jQuery w第i个完整路径：

http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

。确保你的

js

文件夹在你的

html

文件旁边。解决方法：你知道什么，好像jquery链接没有通过，然后一切正常。解决方法：你知道什么，好像jquery链接没有通过通过，在那之后一切都正常。谢谢你的提示，非常感谢！谢谢你的提示，非常感谢！

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