0

私は一般的に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"を1回クリックした場合にのみ、訪問または連絡した後にホームをクリックすると、元の位置に戻ります。

my_script.js私は自分のファイルを次のように書き始めました：

$(document.ready(function) {

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

   }

});

クリックすることでアラートを表示できるかどうかを確認することもできますが、それでも私には難しすぎました。

誰かが私にこれについていくつかのアドバイスを与えることができれば、それは非常にありがたいです！また、タグを使用<div>しています。<nav>タグなしで<div>クラスをタグに適用できると思い<nav>ますか？（html5も非常に新しい）。

4

1 に答える 1

2

まず、jQueryコードにいくつかの小さな構文エラーがあります。これは、ブラウザーコンソールで確認できます。Chromeを使用している場合は、DevToolsのドキュメントを確認することをお勧めします。

エラーは、修正されたコードで以下に強調表示されています。

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

デモを見る

return falseまた、いずれかまたはevent.preventDefault()後に追加する必要があります。alert()そうしないと、ブラウザはアラートの後にリンクをたどりますが、これはあなたが望んでいることではない可能性があります。

また、ページのどこかにjQueryライブラリがすでに含まれていると仮定します。例：

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

またはローカルソースから。

質問の他の部分に答えるには：

  • はい、なしで行うことができます<div>。意味的には、単に使用する方が明確です<nav>
  • jQuery.slideUp()は、アニメーション/スライド、またはを支援し.animate()ます。

をアニメートするには.banner、代わりにをalert()使用できます

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

更新されたデモ

于 2013-03-21T08:33:38.577 に答える