在我显示一个 id 元素后，页面突然跳到顶部

Question

我有一个一切正常的页面，但有一个问题是，在将隐藏元素设置为显示后，我的页面突然跳动。之前隐藏的元素确实会显示出来，但我希望页面不要乱跳。

这里是页面：http://www.problemio.com/add_problem.php

当您将任何内容添加到第三个输入区域并单击“添加类别”链接时，页面会猛然跳到顶部。如果向下滚动，您可以看到显示了一个以前隐藏的文本框，但是如何才能停止页面的猛拉呢？

这是我的 jQuery 代码：

$('#add_category').click(function() { //alert("在添加类别中"); // 现在必须获取文本输入区域的值 var category = $("#category_field").val(); // 工作

     var text_area = $("#log").val();        
     //alert ("text_area: " + text_area);

     // Should append to value of textarea what is in the category
     if ( text_area )
     {
         //alert ("text area NOT EMPTY: " + text_area + " and category: " + category );
         text_area = text_area + " , " + category;    
     }
     else
     {
         //alert ("text area EMPTY: " + text_area + " and category: " + category );
         text_area = category;          
     }    

     // Now replace old text_area with new one
     $("#log").val(text_area); 

     // Now reset the text field
     $("#category_field").val("");

     // Make the categories box visible 
     document.getElementById("categories_box").style.display = 'block';

});

这是 HTML 表单：

         <form id="create_problem" name="form" method="post">
                 <p>
                 <label for="problem_name">Problem Name: </label><input type="text" value="<?php echo $problem_name;?>" size="75" name="problem_name" id="problem_name"></input>
                 </p>
                 <p>
                 Explain the problem:
                 </p>

         <textarea id="content" name="content" class="tinymce" style="width: 500px; height: 350px;">
         </textarea>
        </p>

    <p class="ui-widget">
        <label for="category_field">Category: </label> 
        <input id="category_field" size="25"/> <a id="add_category" href="#">Add Category</a>
    </p>

    <p id="categories_box" class="ui-widget" style="margin-top:2em; font-family:Arial; display: none;">
        Categories:<br />
        <textarea id="log" style="height: 150px; width: 500px;" ></textarea>
    </p>

        <span class="error"   id="categories_error" style="display:none">Categories Can Not Be Empty</span>
        <span class="success" id="categories_success" style="display:none">Categories Added Successfully!</span>    

                 <input type="hidden" id="question_html" name="question_html" />

                 <!-- Check if the person is logged in -->
<!--
                 <p>
                    <input class="problem_follow_checkbox" TYPE="checkbox" NAME="follow_problem" /> Follow this problem        
                 </p>
-->



<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Problem Added Successfully!</span>

        <input type="submit" class="button" value="Add Problem"></input>

<form>

具体来说，执行此操作的行是 jQuery 中的最后一行，它尝试像这样显示元素：

document.getElementById("categories_box").style.display = 'block';

谢谢！！

Answer 1

你需要在

的最后一行return false;

$('#add_category').click(function() {
     var text_area = $("#log").val();        
     //alert ("text_area: " + text_area);

     // Should append to value of textarea what is in the category
     if ( text_area )
     {
         //alert ("text area NOT EMPTY: " + text_area + " and category: " + category );
         text_area = text_area + " , " + category;    
     }
     else
     {
         //alert ("text area EMPTY: " + text_area + " and category: " + category );
         text_area = category;          
     }    

     // Now replace old text_area with new one
     $("#log").val(text_area); 

     // Now reset the text field
     $("#category_field").val("");

     // Make the categories box visible 
     document.getElementById("categories_box").style.display = 'block';

return false;
});

不返回 false 会在页面顶部创建 #；

Answer 2

这是因为链接末尾有一个磅（一个不存在的标签的锚点。因此它会转到页面顶部）。两种可能的选择是添加一个带有新类别框的标签作为锚点，以便它跳转到该标签（以及因此添加的类别框），或者在 onclick 事件结束时返回 false 以便它不会t 注册。