如何单击链接但不重新加载页面？

Question

我有一个订购系统，每次您单击向上或向下箭头时，它都会在列表的顺序中加1或从中删除1。 每次单击链接时，页面都会刷新。

有没有一种方法可以避免刷新，但仍然可以更新并在页面上显示新订单？

我的列表

<div class="row select-order">
    <ol>
        @foreach (var item in Model)
        {
            <li>                    
                    @item.TaskName
                    @if (item.TaskType != (short)OBTaskTypes.SignOn && item.TaskType != (short)OBTaskTypes.Finalize)
                    {

                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder + 1)})"><i class="fa fa-arrow-down"></i></a>
                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder - 1) })"><i class="fa fa-arrow-up"></i></a>
                    }                    
            </li>
        }
    </ol>
</div>

每次单击其中一个href时，它都会设置顺序并刷新。

Answer 1

我真的会再看一次，并确保您需要为此使用锚标记。 也许一个按钮会更好。 如果必须这样做，则必须防止发生默认事件。

http://api.jquery.com/event.preventdefault

$('.select-order a').click(function( event ) {
  event.preventDefault();
  // Do other stuff if needed
});

演示： https : //jsfiddle.net/wxddszct