javascript - 调用 CSS 类而不是使用 JQuery (.css()) 插入属性

Question

我正在使用 JQuery 构建固定 header

目前一切工作正常，但我不想为类设置属性，而是想直接从 css 调用它们。我对这个方法不太熟悉。

下面是一个示例；

#header-main {
  background-color: #ffffff;
  min-height: 107px;
  color: #8c8c8c;
}
#header-main .sabit{
position : fixed;
width: 100%;
z-index: 98;
padding-top: 35px;
border-bottom: 3px ridge #7BBD42;
}

我正在做的是； (工作)

var menu = $('#header-main');
if (...)
    menu.css('position','fixed').css('width','100%').css('z-index','98').css('padding-top','35px').css('border-bottom','3px ridge #7BBD42');
else
    menu.removeAttr('style'); //Back to normal

我正在做什么来实现我想要的目标； (不工作)

var menu = $('#header-main');
if(...)
    menu.addClass("sabit");
else
    menu.removeClass("sabit"); //Back to normal

我也尝试了 menu.addClass(".sabit"); 或 menu.addClass("#header-main .sabit"); 但它们都不起作用。

使用 JQuery 直接添加 css 类我做错了什么？

Answer 1

它不起作用，因为 CSS 中的 #header-main 和 .sabit 之间有空格，这意味着您的 CSS 正在尝试设置 的样式。 sabit #header-main 的后代，而不是 #header-main 元素本身。

更改:

#header-main .sabit

致:

#header-main.sabit