Question

我有一个标签容器，使用<li>作为标签定义（通常的做法）。 <li>在style.css文件中具有与其关联的样式。它有背景颜色和背景图像。

现在，内容中包含<li>的标签下方的每个容器都将具有样式表定义（背景图像和颜色）。

如何使用jQuery在内容区域中覆盖此内容？我无法更改内容，因为它是由数据库驱动的，并且已在应用程序的其他位置使用。

谢谢！

Answer 1

你真的不需要jQuery，你可以简单地在你的层次结构中添加一个CSS声明，删除子li的背景颜色和图像。例如，

.tabs li { background-color: red; background-image: url(something.jpg) }

.tabs li div li { background-color: transparent; background-image: none; }

使用jQuery执行此操作，

$(".tabs > li div li").css("background-color", "transparent");
$(".tabs > li div li").css("background-image", "none");

Answer 2

您可以通过指定更具体的规则来覆盖CSS - 这很麻烦，因为您需要取消之前指定的规则，但这是可能的。

例如，如果你有：

li {
   height: 100px;
}

您可以通过以下方式取消设置：

li li {
   height: auto;
}

更好的方法是确保选项卡的样式信息仅适用于选项卡。如果您向tab-li添加一个类，则可以设置

li.tab {
   height: 100px;
}

并且它不会影响选项卡下方的li元素。这样您就不必更改内容（我希望选项卡不是该内容的一部分），您不必使用javascript来撤消内容。

Answer 3

我没有尝试过，但我最好的猜测是在<div>添加<li>标记，然后将内容加载到<div>。然后，为指定<div>的{{1}}创建定义。然后，这应该级联到加载的内容。