gpt4 book ai didi

javascript - 尝试在 Jquery 中制作动画导航栏

转载 作者:太空宇宙 更新时间:2023-11-04 04:31:45 24 4
gpt4 key购买 nike

我正在尝试使用 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>

最佳答案

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

.ID 用于类 (css)

#ID 用于实际 ID

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

这应该有效..

关于javascript - 尝试在 Jquery 中制作动画导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17169540/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com