Question

我正在使用jQuery来在我的本地服务器上显示/隐藏一些div。现在它在测试页面上工作正常，但是当我每次使用时将它放入我的测试应用程序（用PHP和HTML编写）

<a href="#" 

创建一个它实际上链接的钩子locahost / testsite / localhost＃

什么可以在我的网址末尾添加额外的localhost＃？

<script type="text/javascript" language="JavaScript">
        function controlFooterNotes(v){
                if(v==1) $("#footer_notes").show(50);
                else     $("#footer_notes").hide(50);
        }

        $(document).ready(function(){
                $("#show_footer_notes").click(function(){
                        controlFooterNotes(1);                      
                });
                $("#hide_footer_notes").click(function(){
                        controlFooterNotes(0);                      
                });
        });
</script>

和使用

的html

This is an example of the <a href="#" id="show_footer_notes">Click this link</a>
<div id="footer_notes">
        <a href="#" id="hide_footer_notes">Click here to hide this part.</a>
</div>

Answer 1

您需要停止默认操作。

$(document).ready(function(){
  $("#show_footer_notes").click(function(event){
    event.preventDefault();
    controlFooterNotes(1);                      
  });
  $("#hide_footer_notes").click(function(event){
    event.preventDefault();
    controlFooterNotes(0);                      
  });
});

Answer 2

您的“点击此链接”会将＃添加到网址中。使用以下代码来阻止它：

            $("#show_footer_notes").click(function(e){
                    controlFooterNotes(1);          
                    e.preventDefault();            
            });

Answer 3

使用preventDefault()来停止正常的事件行为。使用链接，表格等等。

$(document).ready(function(){
            $("#show_footer_notes").click(function(e){
                    e.preventDefault();
                    controlFooterNotes(1);                      
            });
            $("#hide_footer_notes").click(function(e){
                    e.preventDefault();
                    controlFooterNotes(0);                      
            });
    });

此处的文档：http://api.jquery.com/event.preventDefault/

Answer 4

e.preventDefault（）的替代方案，如果您不想使用它或不使用JS库，则替换

<a href="#">link</a>

有关

<a href="javascript:void(0);">link</a>

可能看起来不太优雅，但它确实有效。