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，如下所示

＆＃13;

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

＆＃13;

改变链接崩溃的背景颜色

3 个答案: