Question

我很感激任何人都可以帮助我。

我的HTML代码看起来像这样..

        <div class="product-filter clearfix">
        <div id="product-filter" class="display">
        <span style="float: left;">Display:</span>
        <button class="list btn btn-small">List</button>
        <button class="grid active btn btn-small">Grid</span></button>
        </div>

        <div class="filter-items">
        <div class="col-sm-12 col-md-3 col-lg-3">
        some text
        </div>
        </div>
        </div>

我需要的是，当点击“列表按钮”时，它应该为它添加“活动”类并从“网格按钮”中删除“活动”类。此外，它还应从＃filter-items div中删除所有“col-md- *和col-lg *”类，并相应地添加col-md-5和col-lg-5。反之，它应该在点击网格按钮时表现

Answer 1

对于HTML，您需要为按钮添加ID：

<button id="btnList" class="list btn btn-small">List</button>

然后在JavaScript中你有以下内容（这将使所有网格都处于活动状态，对于单个网格给它一个ID并使用哈希（＃））：

$("#btnList").click(function() {
    $(".grid").addClass("active");
});

我同意上述评论。这是一个非常基本的问题，实际上在jQuery文档中已经回答了这个问题：

jQuery API .click() documentation

jQuery API CSS documentation

在Jquery点击功能上删除并添加css类

1 个答案: