替换单击功能上的div id

Question

使用Javascript：

$('nav').before('<div id="box">Open</div>');
$('#box').append('<div class="line"></div>');

$('#box').click(function(event) 
{
    $('nav').animate({height:'toggle'},200);
}

CSS：

#box {
    background: white;
    border: green;
    padding: 7px;
    width: 20px;
}  

我想在单击框时将框背景颜色更改为黄色。如何将此CSS添加到其中。

#box {
    background: yellow !important;
}  

Answer 1

解决方案1：

在jQuery中使用.css()：

$('#box').click(function(event) 
{
  $(this).css('background-color', 'yellow');
  $('nav').animate({height:'toggle'},200);  
}

Learn about .css() in jQuery

---

解决方案2：

你也可以在jQuery中使用.addClass()和一些CSS：

$('#box').click(function(event) 
{
  $(this).addClass('yellowify');
  $('nav').animate({height:'toggle'},200);  
}

CSS：

.yellowify{
  background-color: yellow;
}

Learn about .addClass() in jQuery

Answer 2

您也可以尝试使用css pseudo，不使用脚本

＆＃13;

＆＃13;

#box {
  background: white;
  /* updated */
  border: 1px solid green;
  padding: 7px;
  /* added */
  display: inline-block;
  /* added */
  cursor: pointer;
}
/* on click */

#box:active {
  background: yellow;
}

＆＃13;

<div id="box">Open</div>

＆＃13;

＆＃13;

＆＃13;