Question

我试图用Jquery创建一个导航栏。我们的想法是你单击导航按钮，几个链接（以div的形式）将滑出。但是，我无法让初始点击操作起作用。目前我只是在点击#clickme按钮后尝试将#Home按钮移动到左侧100px。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src = "jquery-2.0.1.js"></script>
<script>
$("#clickme").click(function(){
    $("#Home").animate({left: 100} , "fast");
});


</script>
<style type="text/css">
#Nav {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    top: 268px;
    left: 530px;
    background-color: blue;
}
.Button{
    position:absolute;
    width:200px;
    height:115px;
    z-index:0;
    background-color:#693;
}
</style>
</head>

<body>
<div id="Nav">
    <div id="Home" Class = "Button">Home</div>
    <div id="About" Class = "Button">About The Internship</div>
    <div id="Meet" Class = "Button">Meet the Interns</div>
    <div id="Request" Class = "Button">Request an Intern</div>
    <div id="clickme" Class = "Button">Navigation</div>
</div>


</body>
</html>

Answer 1

你必须等待'直到你的dom准备就绪+你选错了。

.ID适用于类（css）

#ID用于实际ID

$(function(){
  $("#clickme").click(function(){
    $("#Home").animate({left: 100} ,"fast");
  });
})

这应该有用..

Answer 2

除了stackErr的回答： 'fast'应该作为字符串传递。

小提琴：http://jsfiddle.net/jonigiuro/xt57a/

$("#clickme").click(function(){
    $("#Home").animate({left: 100} ,'fast');
}

Answer 3

您的ID选择器不正确。你的代码应该是：

$("#clickme").click(function(){
    $("#Home").animate({left: 100} ,'fast');
});

这不应该，但脚本标签应该具有type属性，因为您没有使用HTML5：

<script type="text/javascript" src="jquery-2.0.1.js"></script>

Answer 4

问题似乎与选择器有关。 ID必须与#一起使用，而不能与.

一起使用

试

$("#clickme").click(function(){
    $("#Home").animate({left: 100} ,fast);
});

您可以在</body>之前将此代码放在底部，使用页面底部的脚本使页面更快＆amp;当dom准备就绪时执行。否则用$(function())

包装密码

试图在Jquery中制作动画导航栏

4 个答案: