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

Question

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

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

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

这是我的 jQuery 代码:

$('#add_category').click(函数() { //警报(“在添加类别中”)； //现在必须获取文本输入区域的值 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

你需要在

的最后一行返回 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 会在页面顶部创建 #；