Question

我有一个页面，一切正常，但一个问题是，在设置隐藏元素后，我的页面突然猛然抬起。之前隐藏的元素确实会显示出来，但我希望页面不要慌张。

以下是页面：http://www.problemio.com/add_problem.php

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

这是我的jQuery代码：

$（ '＃add_category'）。单击（（）的函数 { // alert（“in add category”）; //现在必须获取文本输入区域的值 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会在页面顶部创建＃;

Answer 2

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

页面抖动并在我显示id元素后转到顶部

2 个答案: