Question

我对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;

}

无论如何，我希望能够移动这个“横幅”，为它设置动画，使它有点滑动到页面顶部，定位~top：10px。但只有点击id="about"或id="contact"，如果有人在访问或联系之后点击了主页，它就会返回原来的位置。

我开始使用以下内容编写my_script.js文件：

$(document.ready(function) {

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

   }

});

看看我是否能通过点击获得警示，但很明显，即使这对我来说太难了。

如果有人能就此提出一些建议，我们将非常感谢！另外，我使用的是<div>和<nav>标记。我猜我可以不使用<div>标签，并在我的<nav>标签上应用该课程？（也是html5的新手）。

Answer 1

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

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

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

See demo

您还应在return false之后添加alert()或event.preventDefault()，否则浏览器会在发出警报后跟踪链接，这可能不是您想要发生的事情。

我还假设你已经在某个页面上包含了jQuery库，例如：

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

或从当地来源。

回答问题的其他部分：

是的，你可以不用<div>。在语义上，使用<nav>
jQuery .slideUp()可以帮助动画/滑动，或.animate()。

要为.banner设置动画，而不是使用<{p}} alert()

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

Updated demo

使用jQuery进行.click（函数）的基础知识？

1 个答案: