更改引導面板的背景顏色

我正在嘗試更改面板的背景顏色，使用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（複製粘貼的情況下，在新標籤頁的鏈接如果它給出錯誤）。

任何想法爲什麼會發生這種情況？

來源

2015-06-21 The Wanderer

您不會阻止默認<a>標記行爲，因此您的頁面會刷新。

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

應該解決它。

來源

2015-06-21 07:21:25

Ahh Brilliant !!!解決了它。現在你指出了它，它提醒了我關於javascript void（0）上的這個偉大的線程，以及爲什麼從onlick事件返回false很重要：http://stackoverflow.com/questions/134845/href-attribute-for -javascript-links-or-javascriptvoid0 –

不知道爲什麼可能發生的事情，我個人會試試這個：

<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腳本後，並在你的HTML失去onClick（壞習慣），而不是通過增加data-articleID屬性通過id引用。像這樣：

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

如果您的問題仍然存在，您必須檢查是否有任何其他JavaScript將背景更改爲原始顏色。

來源

2015-06-21 07:43:27

感謝MIchael的迴應。我使用Bogdan的答案解決了上述問題。 –

是的，這個答案比較簡單，但是作爲參考，'onclick'是構建代碼的糟糕方式。看看我的解決方案：http://jsfiddle.net/oszma0ko/1/ –

哦，我明白了。合理。 –

更改引導面板的背景顏色

回答

相關問題