javascript - 更改 Bootstrap 面板的背景颜色

Question

我正在尝试使用 javascript 更改面板的背景颜色以模拟“选定”功能。

因此，在单击时我通过 ID 获取了 div 并更改了它的背景颜色。

它工作正常，但只是暂时重置背景颜色，我不知道为什么？

DJANGO HTML 模板

<div class="panel-group">
    {% if articles %}
        {% for article in articles %}
            <div class="panel panel-success" id="aid_{{ article.articleId }}">
                 <div class="panel-body">
                    <a href="" onclick="populateArticle({{ article.articleId }})" style="font-size: 1.2em"><b>{{ article.title }}</b></a><br/>
                    <span style="color:darkgrey; font-size:.9em; font-family:sans-serif; font-style:italic">{{ article.source }} - {{ article.date }}</span><br/>
                    {{ article.sentences }}
                 </div>
            </div>
        {% endfor %}
    {% else %}
        NO ARTICLES PRESENT
    {% endif %}
</div>

Javascript

function populateArticle(aid) {
    document.getElementById('aid_'+aid).style.backgroundColor="#DEF1DE";
}

这里还有一个指向我记录的显示行为的 gif 的链接:http://g.recordit.co/fSoTieo5Qn.gif (如果出现错误，请将链接复制并粘贴到新选项卡中)。

知道为什么会这样吗？

Answer 1

您没有阻止默认 <a>标记行为，因此您的页面会刷新。

onclick="populateArticle({{ article.articleId }});return false;"

应该修复它。