Question

我在每次点击标签时向一个名为tab-container的div添加一个类，问题是当ex：单击tab2，然后是tab3，然后tab2类没有删除，它只是不断添加类 - 所以我想要在添加新类之前删除前一个类...

剧本：

$(".tabs-content div").hide(); // Initially hide all content
            $(".tabs li:first").attr("id","current"); // Activate first tab
            $(".tabs-content div:first").fadeIn(); // Show first tab content

            $('.tabs a').click(function(e) {
                e.preventDefault();
                var className = $(this).attr("name")
                $(document).find(".tab-container").addClass(className);

                if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
                 return       
                }
                else{             
                $(".tabs-content div").hide(); //Hide all content
                $(".tabs li").attr("id",""); //Reset id's
                $(this).parent().attr("id","current"); // Activate this
                $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
                }
            });

Answer 1

$(".tab-container").attr("class","tab-container "+className);

这样你只需将class属性设置为你想要的。

addClass和removeClass只是帮助函数，在这种简单的情况下会被高估。

Answer 2

您可以删除所有课程

$(document).find(".tab-container").removeClass().addClass(className);

或者，如果您知道其名称

，则可以删除一个类

$(document).find(".tab-container").removeClass("tab2").addClass(className);

如果您需要记住上一堂课，可以使用.data()

（未经测试的示例 - 可能不适用于多个.tab-container）

// get previous value
last_class = $(document).find(".tab-container").data("last_class")

$(document).find(".tab-container").removeClass(last_class).addClass(className);

// remember new value
$(document).find(".tab-container").data("last_class",className)

我如何添加和删除类

2 个答案: