頁面跳躍，並在我顯示ID元素後跳轉到頂部

我有一個頁面，一切正常，但一個問題是設置隱藏元素顯示後，我的頁面突然猛然升起。先前隱藏的元素確實顯示，但我希望頁面不要跳動。頁面跳躍，並在我顯示ID元素後跳轉到頂部

這裏是頁：http://www.problemio.com/add_problem.php

當你添加任何第三輸入區域，然後單擊鏈接「添加類別」頁面抽搐到頂部。如果向下滾動，您可以看到顯示了一個先前隱藏的文本框，但是如何停止頁面的跳動？

這裏是我的jQuery代碼：

$（ '＃add_category'）點擊（函數（）{ // 警報（「中添加類別」）; //現獲得的價值文字輸入方面 VAR類別= $（「＃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形式：

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

感謝：

  <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的，它試圖以顯示像這樣的元件的最後行的行！

來源

2011-11-01 Genadinik

這非常糟糕，但是如果使用jQuery，爲什麼不利用它的語法，只需使用'$（'＃categories_box'）。show（）;'而不是您正在使用的JavaScript方法？ – RobB

您需要返回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塔最後行創建＃在頁面的頂部;

來源

2011-11-01 14:22:40 Steve

謝謝你 - 工作。系統允許我在7分鐘內接受答案。順便說一下，使用return false的好習慣是什麼？我應該在每個功能的底部做到這一點嗎？ – Genadinik

只要你有＃作爲url的錨標籤，它可以防止跳躍... – Steve

這是因爲鏈接的末尾有一個磅（一個不存在的標籤的錨點，因此它會進入頁面的頂部）。兩種可能的選擇是添加一個帶有新類別框的標籤作爲錨點，以便它跳轉到該標籤（因此添加了類別框），或者在onclick事件結束時返回false， t註冊。

來源

2011-11-01 14:26:25 abelito

頁面跳躍，並在我顯示ID元素後跳轉到頂部

回答

相關問題