按钮onclick将不起作用

Question

在我的网站上，当我点击开始考试按钮，应该显示一些元素。但是，只要我点击它，元素就会显示出来然后隐藏起来。 This is the site，这是控制onclick()事件的代码：

// Display initial question 
$("#begin").click(function(){ 
    $("#quiz").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 
    $("#prev").removeClass("hidden"); 
    $("#next").removeClass("hidden"); 
    $("#questionnum").removeClass("hidden"); 

    displayNext(); 
}); 

Answer 1

你可以这样解决这个问题;

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

    $("#quiz, #prev, #next, #questionnum").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 

    displayNext(); 
}); 

或者，只要你可以修改你的“开始考试”按钮来解决这个问题。如果你像这样更新href属性; href="javascript:;"，你可以解决这个问题。因为，当你的空href属性时，页面将被刷新。您需要阻止此默认操作，或者您需要为链接设置无用的href属性。

Answer 2

的#begin是一个锚，所以你必须防止重定向到URL中使用e.preventDefault();href属性默认动作，因为现在刷新页面时你点击：

$("#begin").click(function(e){ 
    e.preventDefault(); 

    $("#quiz, #prev, #next, #questionnum").removeClass("hidden"); 
    $("#intro").addClass("hidden"); 

    displayNext(); 
}); 

注：您可以使用多个选择逗号分隔符,。

希望这会有所帮助。

Answer 3

尝试设置这样的：

$("#begin").click(function(e){ 
e.preventDefault(); 
$("#quiz").removeClass("hidden"); 
$("#intro").addClass("hidden"); 
$("#prev").removeClass("hidden"); 
$("#next").removeClass("hidden"); 
$("#questionnum").removeClass("hidden"); 
displayNext(); 

});