Question

我试图在一个网站内显示popup-div并且效果很好，除了一件事 - 我想阻止刷新站点的默认行为。我是javascript的新手，老实说我不知道如何添加功能（我已经找到了合适的功能，我认为......）。

<script type="text/javascript">

function toggleVisibility(selectedPopup) {

     var popvar = document.getElementsByClassName('popup');

     for(var i=0; i<popvar.length; i++) {
          if(popvar[i].id == selectedPopup) {
                popvar[i].style.visibility = 'visible';
          } else {
                popvar[i].style.visibility = 'hidden';
          }
     }

}

它的工作方式就像我希望它工作一样 - 它显示所选的DIV，隐藏另一个，反之亦然。不过，我想阻止网站跳到顶端。所以我添加了这个片段：

$(function() {
    $("#").click(function(event){
        event.preventDefault()
    });
});

响应的html是这样的：

<a href="#" onclick="toggleVisibility('pop01');">

和这个

<div id="pop01" class="popup">
    <img src="assets/img/01/01_02_pop_01.png"></img>
</div>

如何将第二个javascript片段包含在第一个？

中

非常感谢...

Answer 1

您应该能够将event传递给您的函数。

HTML

<a href="#" onclick="toggleVisibility(event, 'pop01');">

Javascript（部分）

function toggleVisibility(event, selectedPopup) {
   event.preventDefault();

   var popvar = document.getElementsByClassName('popup');
   // etc...
}

我相信应该这样做！

JSFiddle示例： http://jsfiddle.net/c4LXf/

Answer 2

作为替代方案，您只需删除#并替换为javascript:;

即可

<a href="javascript:;" onclick="toggleVisibility('pop01');">

或者删除onclick并使用href：

<a href="javascript:toggleVisibility('pop01');">

Answer 3

而不是

$(function() {
  $("#").click(function(event){
  event.preventDefault()
});

尝试

$(function() {
  $("#").click(function(event){
  return false;
});

Answer 4

您可以使用以下内容：

<a href="#" onclick="return toggleVisibility('pop01');">

如果您在函数中添加return false：

function toggleVisibility(selectedPopup) {

     // your code ...

     return false;
}

或者，更改您的链接：

<a href="javascript:toggleVisibility('pop01');">

javascript切换可见性并添加函数preventDefault

4 个答案: