Question

我有以下jquery脚本，当有人点击链接时显示/隐藏div。问题是当有人点击页面中间的链接时，div确实正确显示和隐藏，它也会使整个页面跳到顶部。我该如何防止这种情况？

<a href="#" class="toggle-div">Show Div</a>

<script type='text/javascript'>
  $(".toggle").click(function(){
  $(".toggle-div").slideToggle("fast");
    $(this).html(function(i,html) {
        if (html.indexOf('Show') != -1 ){
           html = html.replace('Show','Hide');
        } else {
           html = html.replace('Hide','Show');
        }
        return html;
    });
});
</script>

Answer 1

<script type='text/javascript'>
  $(".toggle").on('click', function (event){
  event.preventDefault();
  $(".toggle-div").slideToggle("fast");
    $(this).html(function(i,html) {
        if (html.indexOf('Show') != -1 ){
           html = html.replace('Show','Hide');
        } else {
           html = html.replace('Hide','Show');
        }
        return html;
    });
});
</script>

显示/隐藏div的jquery切换...如何防止页面跳到顶部？

1 个答案: