jQuery的.click（函数）基础知识？

我在jQuery和HTML中都很新。我只是想知道是否有人可以帮我解决这个我正在写的小型jQuery脚本。jQuery的.click（函数）基础知识？

在我的HTML文件我有：

<body> 
    <div class="banner"> 
     <nav> 
     <ul> 
      <li id="home"><a href="#">Home</a></li> 
      <li id="about"><a href="#">About</a></li> 
      <li id="contact"><a href="#">Contact</a></li> 
     </ul> 
     </nav> 
    </div> 
<script type="text/javascript" src="my_script.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</body>

我想，用jQuery的帮助下，改变在类的旗帜现在看起来整个妆容：

.banner { 
    height:200px; 
    width: 100%; 
    position: absolute; 
    top: 300px; 
    background: lightblue; 
}

我还应用这些样式：

nav ul { 
    position: absolute; 
    bottom: 0px; 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

nav ul li { 
    display: block; 
    float: left; 
    line-height: 2.5em; 
    padding-left:1em; 
    margin-left:1em; 
    border-left:1px dotted black; 

}

无论如何，我想能够移动这个“旗帜”，我的动画t以便它滑到页面的顶部，以定位〜top：10px。但只有当点击id="about"或id="contact"时，如果一个人在访问过或接触过后会点击回家，它会回到原来的位置。

我开始写我的my_script.js文件只：

$(document.ready(function) { 

    $("#about").click(function() { 
    alert("hello!"); 

    } 

});

，看看我，甚至可以得到一个警报通过点击来展示，但很明显，即使是太难受。

如果有人可以给我一些建议，这将非常感激！此外，我正在使用<div>和<nav>标签。我猜我可以不用<div>标签，并在我的<nav>标签上应用该课程？（对html5也很新颖）。

来源

2013-03-21 XT_Nova

首先你需要学会使用错误控制台。见http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers – JJJ 2013-03-21 08:36:25

谢谢你的链接。 :) – 2013-03-21 08:46:46

首先，你的jQuery代码有一些小的语法错误，这可以在浏览器控制台中看到。如果您使用Chrome，我建议您查看DevTools documentation。

的错误被纠正代码如下强调：

 missing right parenthesis 
      | 
      v 
$(document).ready(function() { 
    $("#about").click(function() { 
    alert("hello!"); 
    }) // <-- missing right parenthesis 
})

See demo

您还应该添加任何return false或event.preventDefault()后alert()否则浏览器会按照链接报警后，这可能不是成为你想要发生的事情。

我还以为你已经包含在页面上的jQuery库的地方，例如：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

或从本地源。

要回答这个问题的另一部分：

是的，你可以做无<div>。在语义上，它会更清晰地使用<nav>
jQuery .slideUp()可以帮助动画/滑动，或.animate()。

要动画.banner，而不是alert()的，你可以使用

$('.banner').animate({top:'10px'}, 1000) 
return false

Updated demo

来源

2013-03-21 08:33:38 andyb

谢谢你，现在警报确实有效！ :)如果你对这个动画有什么好的想法，我会很乐意阅读它！但是，谢谢你看我的代码！ :) – 2013-03-21 08:43:22

谢谢你提供的信息丰富的答案！在event.preventDefalut（）中我不需要任何东西（）？再一次感谢你！ – 2013-03-21 08:50:08

我会尝试添加一个示例动画到答案。要回答_preventDefault_问题，需要在函数中声明_event_对象以接收事件。所以你需要'$（“＃about”）。click（function（event）'。我更喜欢'return false'方法，如果我不需要这个事件。 – andyb 2013-03-21 08:55:42

jQuery的.click（函数）基础知识？

回答

相关问题