Question

我想在点击按钮时突出显示该按钮，并将特定课程添加到<div> class item。

HTML

<button type="button" class="btn gridLarge">largegrid</button>
<button type="button" class="btn grid active">smallgrid</button>
<button type="button" class="btn list">list</button>
<div class="item">text</div>

CSS

.item{
   height:240px;
   border:1px solid orange;
 }
.item.list{
   width:600px;
   height:500px;
   border:1px solid red;
 }
 .item.gird{
   width:400px;
   height:500px;
   border:1px solid red;
 }
.item.gridlarge{
   width:500px;
   height:500px;
   border:1px solid red;
}

button{
  cursor:pointer;
  border:1px solid green;
   padding:20px;
  color:red;
  margin-bottom:20px;
 }

.btn.active{
  color:green;
  background-color:red;
}

例如

点击button.gridLarge后，我想突出显示它（添加课程active ）并将课程.gridLarge添加到div.item
点击button.grid后，我想突出显示它并将课程.grid添加到div.item
点击button.list后，我想突出显示它并将课程.list添加到div.item

这是我目前的代码：JSFiddle

Answer 1

如果您将要添加的课程应用为按钮的id，则可以执行以下操作：

$('.btn').click(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
  $('.item').removeClass().addClass('item').addClass(this.id);
});

Demo

旁注：您的css中有拼写错误，第二个按钮中的班级为grid，css为gird

Answer 2

您可以class获取attr，然后移除btn类以获取其他class名称。但是，我更希望在data属性中保存类名。

Demo

<强> HTML：

<button type="button" data-class="gridLarge" class="btn gridLarge active">largegrid</button>
<button type="button" data-class="grid" class="btn grid">smallgrid</button>
<button type="button" data-class="list" class="btn list">list</button>
<div class="item"></div>

<强>使用Javascript：

$('.btn').click(function () {
    var $this = $(this);

    $('.btn').removeClass('active');
    $this.addClass('active');

    $('.item').removeClass('gridLarge grid list').addClass($this.data('class'));
});

<强> CSS：

.item {
    height:240px;
    border:1px solid orange;
}
.item.list {
    width:600px;
    height:500px;
    border:1px solid red;
}
.item.grid {
    width:400px;
    height:500px;
    border:1px solid red;
}
.item.gridlarge {
    width:500px;
    height:500px;
    border:1px solid red;
}
button {
    cursor:pointer;
    border:1px solid green;
    padding:20px;
    color:red;
    margin-bottom:20px;
}
.btn.active {
    color:green;
    background-color:red;
}

Answer 3

DEMO

最佳做法是使用代码将使用的data-yourVariableName（我的DEMO中的data-class）属性。然后你就写下这样的东西：

$("button").click(function(){
    $(".item").toggleClass($(this).attr('data-class'));
});

这是jQuery代码。如果你不熟悉，这是他们的API。

如何通过单击按钮使用removeClass和addClass

3 个答案: