从列表元素 () 获取所选值后刷新页面<li>

Question

我有一个以下HTML结构：

<ol class="slds-progress__list" id="olid">
    <li class="slds-progress__item"> 123 </li>
    <li class="slds-progress__item"> 345 </li>
</ol>

我在下面写了Jquery来获取选定的li元素并对其应用其他类：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
    $('#olid li').click(function() {
            $(this).addClass("slds-is-active");
    });
})

问题：类slds-is-active正在应用于所选元素，但页面正在刷新并且选择正在消失。如何避免此处页面刷新？有没有其他方法可以获取选定的li元素并应用类并避免页面刷新。

Answer 1

$(function() {
    $("#olid li").click(function() {
            $(this).addClass("slds-is-active");
            **return false;**
    });

添加返回 false 会停止页面刷新。

Answer 2

返回 false 会导致 jQuery 在处理事件时不执行默认操作。

$('#olid li').click(function() {
        $(this).addClass("slds-is-active");
        return false;
});

看起来元素的默认操作是导航到所选链接。返回 false 可防止此行为。