如何停止鏈接按鈕刷新頁面

Question

在我的代碼中，我使用了一個名為updateLogButton的鏈接按鈕，該按鈕顯示/隱藏了一個div。 因為每當它的單擊焦點移到頁面開頭時，我都會使用鏈接按鈕。 如何停止這種默認行為？

jQuery代碼段：

$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

});

HTML代碼：

<tr>
    <td><a href="#"  id="updateLogButton">Update Log</a></td>
</tr>
<tr>
    <td colspan="3" >
        <div id="updateLogText" style="width:100%;">
            <?php echo $data['updates']; ?>
        </div>

    </td>
</tr>

編輯：我的意思的示例： http : //jsfiddle.net/cF4Bb/7/

Answer 1

為了防止單擊鏈接時發生默認操作，您可以從點擊處理程序中返回false或調用event.preventDefault ，其中event是傳遞給點擊處理程序的事件對象。

$('#updateLogText').hide();

$('#updateLogButton').click(function(event) {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }
    event.preventDefault();
    //or return false;
});

Answer 2

添加返回false

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

     return false;
});

Answer 3

您也可以嘗試將href更改為：

<a href="javascript:void(0);" id="updateLogButton">Update Log</a>

Answer 4

一鍵事件返回false

$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

       //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }
    return false;
});

Answer 5

從中刪除href =“＃”

<td><a **href="#"** id="updateLogButton">Update Log</a></td>

至

<td><a id="updateLogButton">Update Log</a></td>

請注意，這可能會刪除“超鏈接”之類的文本； 您可以使用CSS重新應用。

[編輯：添加]或者，您也可以使用LinkBut​​ton，如下所示：

<asp:LinkButton id="btnLink" Text="Update Log" **onclick**="javascript:ShowHide(); return false;"/>

您將必須編寫自己的javascript函數。 **注意：我不記得是onclick還是onclientclick，但是您明白了。