改变链接崩溃的背景色

Question

我想更改链接崩溃的背景色，但它不起作用。
为什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <a id="aa" data-toggle="collapse" href="#collapse1" onclick="$(this).css('background-color','#ececec')">
 <div>
 click here
 </div>
 </a>
 

Answer 1

为此，需要将a元素设置为display: inline-block或display: block：

a { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="aa" data-toggle="collapse" href="#collapse1" onclick="$(this).css('background-color', '#ececec')">
  <div>
    click here
  </div>
</a>

话虽如此，您不应完全使用on*事件属性。使用不引人注目的JS代替活动处理程序。也应避免使用css()，以添加样式表中定义的CSS类。尝试以下操作：

$('#aa').click(function() {
  $(this).toggleClass('active');
});

a { display: inline-block; }
a.active { background-color: #ECECEC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="aa" data-toggle="collapse" href="#collapse1">
  <div>
    click here
  </div>
</a>

Answer 2

在单独的文件中尝试一下：

$(function(){
  $('a[data-toggle=collapse]').on('click', function() {
    $(this).css('color', 'yellow');
  });
});

Answer 3

您还需要添加 display:block，例如以下

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <a id="aa" data-toggle="collapse" href="#collapse1" onclick="$(this).css({'background-color':'#ececec', 'display':'block'})">
 <div>
 click here
 </div>
 </a>