Question

我有一个包含三个li类的ul菜单：.1-is-on，.2-is-off，.3-is-off。

无论哪个类与.active一起，都应该显示类名的“on”部分。默认情况下，在页面加载时，1-is-on已为其分配.active。当我点击2-is-off时.active会移动到2-is-off并离开1-is-on，这很棒。

当.active刚刚移动时，我希望现在.active在哪里做两件事： 1.用“on”替换“off”部分 2.用“off”替换兄弟li的其他“on”

jQuery的：

$(function() {    
$("ul.menu li").bind('click',function() {
   var xxx = $(this).siblings('li:not(.active)')
       if($(this).hasClass('active')) {
        $(this).attr("class",this.className.replace('off','on'));
        $(xxx).attr("class",xxx.className.replace('on','off'));
        }
});
});

HTML：

<ul class="menu">
    <li class="1-is-on active">1</li>
    <li class="2-is-off">2</li>
    <li class="3-is-off">3</li>
</ul>

我希望这只是我想念的小事，但这让我发疯了！

Answer 1

$("ul.menu li").click(function() {
    $(this).siblings().each(function() {
       this.className = this.className.replace("on", "off"); 
    });
    this.className = this.className.replace("off", "on");
    $(this).addClass("active").siblings().removeClass("active");
});

对于所点击元素的所有兄弟，on替换为off，然后将off替换为on所点击的元素。然后，它会将active类添加到单击的元素中，并将其从所有其他元素中删除。

您可以看到此here的示例。

Answer 2

$(function() {    
    $("ul.menu li").bind('click',function() {
        // Do nothing if we're already active...
        if ($(this).hasClass('active')) return;

        // find the previously active element, remove active and remove "on"
        var previousOn = $(this).siblings('.active');
        previousOn.removeClass('active');
        previousOn.attr("class", previousOn.attr("class").replace("on", "off"));

        // Make the current element active
        $(this).addClass('active');
        // Replace "off" with "on" for this element
        this.className = this.className.replace('off','on');
    });
});

基于活动类通过jquery替换类名的一部分

2 个答案: