在我的Rails项目中,我有HTML文件
<a href='#' id="show_advanced">Show advanced options</a>
然后在JavaScript / JQuery中
jQuery("#show_advanced").click(function() { // if link is clicked
event.preventDefault(); // don't go to another page
if (jQuery('.advanced_option').is(':hidden')) { // if it is hidden, slide down
jQuery('.advanced_option').slideDown();
jQuery("#show_advanced").html("Hide advanced options");
} else { // if not, slide up
jQuery('.advanced_option').slideUp();
jQuery("#show_advanced").html("Show advanced options");
}
});
显示表单的高级选项。在Chrome中,这很好用。但是在FireFox中,链接只会将我带到页面.../#
,这不正确。我该如何解决?
答案 0 :(得分:2)
我认为你没有阻止锚标记的默认行为。如果您在页面http://example.com/index.html并且有一个带有href的哈希+文本的锚点,那么该链接将把用户带到带有id的文本的元素。
<a href='#end'>Click Me!</a>
...
<div id='end'>content</div>
如果要阻止浏览器出现此标准行为,则需要使用事件的preventDefault函数。关键是将事件传递给回调函数:
jQuery("#show_advanced").click(function(event) {
event.preventDefault();
...
}
你错过了回调声明中的event参数!
答案 1 :(得分:0)
实际上你不需要href ='#'。把它留作锚点。
<a id="show_advanced">Show advanced options</a>
<script>
$("#show_advanced").click(function () {
console.log("clicked");
});
</script>