0

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

4 に答える 4

0

ID セレクターが正しくありません。コードは次のようになります。

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

これは問題ではありませんが、HTML5 を使用していないため、script タグには type 属性が必要です。

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