0

我试图用 Jquery 制作一个导航栏。这个想法是，您单击导航按钮，几个链接（以 div 的形式）将滑出。但是，我无法使初始点击操作起作用。目前，我只是在单击#clickme 按钮后尝试将#Home 按钮向左移动 100 像素。

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

4 回答 4

1

你必须等到你的 dom 准备好 + 你选择了错误的选择器。

.ID 用于类（css）

#ID 用于实际 ID

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

这应该工作..

于 2013-06-18T13:04:19.107 回答
1

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

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

$("#clickme").click(function(){
    $("#Home").animate({left: 100} ,'fast');
}
于 2013-06-18T13:05:34.557 回答
0

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

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

这无关紧要，但 script 标签应该具有 type 属性，因为您没有使用 HTML5：

<script type="text/javascript" src="jquery-2.0.1.js"></script>
于 2013-06-18T13:03:32.387 回答
0

问题似乎出在选择器上。id 必须与#not with 一起使用.

尝试

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

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

于 2013-06-18T13:05:13.453 回答