非功能性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

回答

相关问题