jQuery的.click（函數）基礎知識？

我在jQuery和HTML中都很新。我只是想知道是否有人可以幫我解決這個我正在寫的小型jQuery腳本。jQuery的.click（函數）基礎知識？

在我的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; 

}

無論如何，我想能夠移動這個「旗幟」，我的動畫t以便它滑到頁面的頂部，以定位〜top：10px。但只有當點擊id="about"或id="contact"時，如果一個人在訪問過或接觸過後會點擊回家，它會回到原來的位置。

我開始寫我的my_script.js文件只：

$(document.ready(function) { 

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

    } 

});

，看看我，甚至可以得到一個警報通過點擊來展示，但很明顯，即使是太難受。

如果有人可以給我一些建議，這將非常感激！此外，我正在使用<div>和<nav>標籤。我猜我可以不用<div>標籤，並在我的<nav>標籤上應用該課程？（對html5也很新穎）。

來源

2013-03-21 XT_Nova

首先你需要學會使用錯誤控制檯。見http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers – JJJ 2013-03-21 08:36:25

謝謝你的鏈接。 :) – 2013-03-21 08:46:46

首先，你的jQuery代碼有一些小的語法錯誤，這可以在瀏覽器控制檯中看到。如果您使用Chrome，我建議您查看DevTools documentation。

的錯誤被糾正代碼如下強調：

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

See demo

您還應該添加任何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

Updated demo

來源

2013-03-21 08:33:38 andyb

謝謝你，現在警報確實有效！ :)如果你對這個動畫有什麼好的想法，我會很樂意閱讀它！但是，謝謝你看我的代碼！ :) – 2013-03-21 08:43:22

謝謝你提供的信息豐富的答案！在event.preventDefalut（）中我不需要任何東西（）？再一次感謝你！ – 2013-03-21 08:50:08

我會嘗試添加一個示例動畫到答案。要回答_preventDefault_問題，需要在函數中聲明_event_對象以接收事件。所以你需要'$（「＃about」）。click（function（event）'。我更喜歡'return false'方法，如果我不需要這個事件。 – andyb 2013-03-21 08:55:42

jQuery的.click（函數）基礎知識？

回答

相關問題