非功能性JavaScript

這裏是第一次程序員。我正在嘗試添加到我正在構建的某個網站中，並且遇到了一些jQuery問題。我用我的代碼找不到問題，但是當我點擊相關的鏈接時，它唯一做的就是在URL的末尾添加一個＃。我在這裏錯過了什麼？非功能性JavaScript

謝謝。代碼如下。

的JavaScript：

$(document).ready(function(){ 
$('.ShowHideButton').click(function(){ 
    $('.MenuBar').slideToggle('slow'); 
}); 
});

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<script type="text/javascript" src="NavMenu.js"></script> 
<link type="text/css" rel="stylesheet" href="common.css"> 

<title>Test Room, North Wall</title> 

<link rel="apple-touch-icon" href="apple-touch-icon.png"> 
<link rel="shortcut icon" href="Icons/Favicon.PNG" type="image/x-icon" /> 

</head>

<div class="Wall"> 
    <img src="Rooms/NorthBlank.JPG" width = 100% /> 
</div> 

<div class="Tray"> 
    <div class="SlideBar"> 
     <div class="ShowHideButton"> 
      <a href = "#"><img src="Icons/Toggle.png" /></a> 
     </div> 
    </div> 

    <div class="MenuBar"> 
     <ul> 
      <li><a href = "TestWest.htm"><img src="Icons/NavLeft.png" /></a></li> 
      <li><img src="Icons/Info.PNG" /></li> 
      <li><a href = "TestDoor.htm"><img src="Icons/Door.PNG" /></a></li> 
      <li><a href = "TestEast.htm"><img src="Icons/NavRight.png" /></a></li> 
     </ul> 
    </div> 
</div> 

</body> 
</html>

CSS：

head{ 
font-family: Tahoma; 
} 

body { 
font-family: Tahoma; 
background-color: Black; 
margin: 0px; 
padding: 0px; 
} 

li { 
display: inline; 
} 

.Wall { 
margin: 0px; 
padding: 0px; 
border: none; 
position: fixed; 
top: 0px; 
left: 0px; 
} 

.Tray { 
width: 100%; 
height: 150 px; 
position: fixed; 
bottom: 0px; 
} 

.MenuBar { 
height: 150px; 
width: 600px; 
bottom: 0px; 
margin-bottom: 0px; 
margin-left: auto; 
margin-right: auto; 
background-color: #999999; 
opacity: 0.6; 
} 

.SlideBar { 
width: 100%; 
height: 150 px; 
position: relative; 
bottom: 0px; 
} 

.ShowHideButton { 
height: 16px; 
width: 90px; 
margin-left: auto; 
margin-right: auto; 
background-color: #999999; 
opacity: 0.6; 
}

來源

2013-05-13 user2377660

除了缺少jQuery庫之外，我還建議您學習如何在瀏覽器中進行調試（最好是Chrome或Firefox的firebug）。 – ShadowScripter 2013-05-13 13:06:18

@ShadowScripter--很好的建議;不確定在這種情況下會有所幫助。 – 2013-05-13 13:08:43

除了您還沒有的jQuery（這Jay Blanchard flagged up），你還需要防止的事實鏈接的默認操作：

$(document).ready(function(){ 
$('.ShowHideButton').click(function(){ 
    $('.MenuBar').slideToggle('slow'); 
    return false; // <== The new bit 
}); 
});

或

$(document).ready(function(){ 
$('.ShowHideButton').click(function(e){ // <== Added 'e' arg 
    $('.MenuBar').slideToggle('slow'); 
    e.preventDefault();     // <== And preventDefault call 
}); 
});

這是因爲，否則，點擊鏈接將遵循href，在你的情況下是#（因此它被添加到URL的原因）。

來源

2013-05-13 13:11:21

請注意，'.ShowHideButton'是一個div，而不是鏈接。切換到'.ShowHideButton a'。 – ShadowScripter 2013-05-13 13:12:22

@ShadowScripter事件在單擊錨點時傳播，並觸發上述操作，所以使用'preventDefault（）'就可以了。 – billyonecan 2013-05-13 13:12:56

@ShadowScripter：不需要，即使我在按鈕上處理事件，單擊鏈接也會阻止默認設置，這樣就可以繼續執行OP所需的操作（即使您單擊按鈕的某個邊緣那不是鏈接）。 – 2013-05-13 13:13:01

你沒有包含jQuery庫。這裏有一種方法 -

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

當然，這應該是連接到您的其他Javascript代碼文件鏈接。

來源

2013-05-13 13:04:03

您還應該使用preventDefault()以防止錨固貫徹執行的，一旦被點擊：

$('.ShowHideButton').click(function(e) { 
    e.preventDefault(); 
    $('.MenuBar').slideToggle('slow'); 
});

來源

2013-05-13 13:08:41 billyonecan

非功能性JavaScript

回答

相關問題