0

一般来说，我对 jQuery 和 HTML 都很陌生。我只是想知道是否有人可以帮助我解决我正在尝试编写的这个小型 jQuery 脚本。

在我的 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;

}

无论如何，我希望能够移动这个“横幅”，对其进行动画处理，使其有点滑动到页面顶部，定位〜顶部：10px。但只有点击id="about"或id="contact"，如果在访问过关于或联系后点击首页，它会回到原来的位置。

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

$(document.ready(function) {

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

   }

});

看看我是否可以通过单击来显示警报，但显然，即使这对我来说也太难了。

如果有人可以就此给我一些建议，将不胜感激！另外，我正在使用<div>和<nav>标签。我猜我可以不用<div>标签并将类应用到我的<nav>标签上？（对 html5 也很陌生）。

4

1 回答 1

2

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

错误在更正后的代码中突出显示：

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

看演示

您还应该添加其中一个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

更新的演示

于 2013-03-21T08:33:38.577 回答