Question

我有5个菜单。当我单击任何项目时，我添加一个类来更改它的颜色。我也删除了其他4个项目的颜色，无论它们是否有颜色。是否有更好的方法，可能通过CSS，删除那些未被选中的类？

class Line(models.Model):
    name = models.CharField("Name of line", max_length=50, blank=True)


class Cross(models.Model):
    lines = models.ManyToManyField(Line, verbose_name="Lines crossed")
    date = models.DateField('Cross Date', null=True, blank=False)

Answer 1

使用每个项目的唯一类删除，并使用单个公共类标记当前项目。

例如，使用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');
});

Answer 2

我假设所有这些类都是必要的（因为你已经有了.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');
});

这是处理事情的更好方法。

Answer 3

示例菜单：

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

添加以下CSS：

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

    }

然后使用jquery：

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

Answer 4

其他解决方案可能是：

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

CSS - 在这种情况下删除类的更好方法？

4 个答案: