CSS - 在這種情況下更好的方法來刪除類？

我有一個5項目的菜單。當我點擊任何項目時，我會添加一個班級來更改顏色。我也從其他4個項目中刪除顏色，無論它們是否有顏色。有沒有更好的方法，可能通過CSS來移除那些未被選中的類？CSS - 在這種情況下更好的方法來刪除類？

switch(currentC.data("template")) { 
    case "cataction1": { 
    currentC.addClass("active cataction1Current"); 
    $(".catbarlist li").not(currentC).removeClass("cataction2Current cataction3Current cataction4Current cataction5Current active activenotransit"); 
    break; 
    } 
    case "cataction2": { 
    currentC.addClass("active cataction2Current"); 
    $(".catbarlist li").not(currentC).removeClass("cataction1Current cataction3Current cataction4Current cataction5Current active activenotransit"); 
    break; 
    } 
    case "cataction3": { 
    currentC.addClass("active cataction3Current"); 
    $(".catbarlist li").not(currentC).removeClass("cataction1Current cataction2Current cataction4Current cataction5Current active activenotransit"); 
    break; 
    } 
    case "cataction4": { 
    currentC.addClass("active cataction4Current"); 
    $(".catbarlist li").not(currentC).removeClass("cataction1Current cataction2Current cataction3Current cataction5Current active activenotransit"); 
    break; 
    } 
    case "cataction5": { 
    currentC.addClass("active cataction5Current"); 
    $(".catbarlist li").not(currentC).removeClass("cataction1Current cataction2Current cataction3Current cataction4Current active activenotransit"); 
    break; 
    } 
}

來源

2015-12-01 jd1138

爲了更好的理解，請提供**工作演示**（*代碼片段，jsfiddle ... *） –

我同意：一個工作示例會有幫助。爲什麼每個元素都需要它自己獨特的「當前」類？ – showdev

這麼多複製和粘貼在該代碼中。什麼是CSS？ – epascarello

使用每個項目的唯一類並使用單個公共類標記當前項目。

例如，使用jQuery：

$(document).on('click', '.my-menu > LI', function() { 
    // Unmarking previously marked item. 
    $(this.parentNode).children('.cur').removeClass('cur'); 

    // Marking new current item. 
    $(this).addClass('cur'); 
});

來源

2015-12-01 18:07:34

他已經有了一個「主動」類。顯然他也需要其他課程。不知道爲什麼。 –

@ChuckLeButt看起來像一個不好的做法（也許一些遺留代碼，最初打算用於例如IE6不能在選擇器中組合類），所以我建議更好的做法。 –

這是純粹的猜測。沒有看到HTML和CSS，我們只能假設所有這些類都有一個很好的理由（儘管說實話，我無法理解它會是什麼）。 –

我認爲所有這些類是必要的（因爲你有一個.active類的話）。我也假設你沒有使用click事件是有原因的。

如果是這樣，您可以做的第一件事是通過創建一個function來消除不需要的樣式，從而使自己變得更清潔/更簡單。很多重複的代碼不好 - 很難閱讀，很難維護。例如：

function removeCatbarColor() { 
    $(".catbarlist li").removeClass("cataction1Current cataction2Current 
    cataction3Current cataction4Current cataction5Current active activenotransit"); 
}

，然後應用樣式到活動的人之前調用它：

switch(currentC.data("template")) { 
    case "cataction1": { 
    removeCatbarColor(); 
    currentC.addClass("active cataction1Current"); 
    break; 
    } 
    case "cataction2": { 
    removeCatbarColor(); 
    currentC.addClass("active cataction2Current"); 
    break; 
    } 
    ...

可能有可能會進一步改進，但沒有看到你的HTML/CSS我只能猜測。（你真的需要這麼多的課？一個工作的jsfiddle將真正幫助。）

處理事情的更好方法，下面給出你的描述，將有永久類爲每個cataction。因此，像：

<ul> 
    <li class="cataction1">Link</li> 
    <li class="cataction2">Link</li> 
    <li class="cataction3">Link</li> 
    <li class="cataction4">Link</li> 
</ul>

這樣，你在你的CSS需要的是：

.cataction1 { 
    // styles when not active 
} 
.cataction1.active { 
    // styles when active 
} 
// etc

，讓您簡化您的JS像這樣：

$('li').on('click', function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
});

這是一個更好的處理事物的方式。

來源

2015-12-01 18:09:22

嗨Chuck LeButt :)，是的 - 我應該提出一些代碼，以便更好地展示，並且在回到辦公桌時做。之所以我在Active之後有另一個課程，是爲了在文本上改變顏色 - 除了激活（爲菜單項添加下劃線）之外，每個點擊/選擇的菜單項都需要自己的顏色。 – jd1138

舉例菜單：用jQuery

.menu-item .active{ 
     background-color:#1B3E70; 
     color:white; 

    }

然後：

<li class="menu-item"> 
    <a href="#">About</a> 
    <a href="#">Home</a> 
</li>

添加以下CSS

$('.menu-item a').click(function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
    });

來源

2015-12-01 18:14:54 alex

其他的解決方案可能是：

$(document).on("click", ".catbarlist li", function(e){ 
    $(this).addClass('active'); 
    $(this).siblings('.active').removeClass('active'); 
});

來源

2015-12-01 18:16:38

CSS - 在這種情況下更好的方法來刪除類？

回答

相關問題