Изменение цвета фона панели начальной загрузки

Question

Я пытаюсь изменить цвет фона панели с помощью javascript, чтобы эмулировать «выбранную» функциональность.

Итак, по щелчку я получу идентификатор div по ID и меняю его цвет фона.

Он работает нормально, но только мгновенно и снова сбрасывает цвет фона, и я понятия не имею, почему?

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;" 

Должен закрепить его.

Answer 2

Понятия не имею, почему это может происходить, я лично хотел бы попробовать это:

<script> 
    $(document).ready(function() { 
     $(".panel-body a").on("click", function (e) { 
      e.preventDefault(); 
      var id = "#aid_" + $(this).attr("data-articleID"); 
      $(id).css("background-color", "#DEF1DE"); 
     }); 
    }); 
</script> 

После вашего сценария JQuery и потерять onClick в вашем HTML (плохая практика) вместо того, чтобы передать идентификатор ссылки, добавив атрибут data-articleID , Как это:

<a href="#" data-articleID="id23" style="font-size: 1.2em"><b>article title</b></a> 

Если проблема все еще сохраняется вы должны проверить на любой другой JavaScript изменение фона обратно в оригинальные цвета.