Question

我目前正在为一家建筑公司设计网站。这是我目前提到的页面：http://www.hla.co.za/projects/Hyundai_Training_Centre/。每个项目在每个项目页面上都有一个类别（住宅，商业，教育），我有以下内容，告诉该页面是什么类型的项目：

<div id="projects" data-cat="commercial">

使用Javascript / Jquery我得到attr值：

var cat = $("#projects").attr('data-cat');

我知道这是正常的，因为当我alert(cat)它正常工作时。
在导航菜单上，有相应项目类型值的链接:(在data-highlight）

<ul id="sub">
    <li data-highlight="commercial">
        <a href="http://www.hla.co.za/projects/#commercial">Commercial</a>
    </li>
    <li data-highlight="residential">
        <a href="http://www.hla.co.za/projects/#residential">Residential</a>
    </li>
    <li data-highlight="education">
        <a href="http://www.hla.co.za/projects/#education">Education</a>
    </li>
</ul>

我想更改当前项目类型的字体颜色，所以我这样做：

$("li[data-highlight='"+cat+"']").css( "color", "red" );

但由于某种原因，它不会改变颜色。但是当我尝试做其他事情时，例如：

$("li[data-highlight='"+cat+"']").remove();

它工作正常，我不明白为什么会这样，并且非常感谢你的帮助。

Answer 1

您正在设置li的颜色，但内部a会覆盖它。

只需使用$("li[data-highlight='"+cat+"'] a").css( "color", "red" );就可以了。

Answer 2

我看了你链接的页面。问题出在你的style.css文件中。我包含以下内容：

.nav a { text-decoration: none; color: white; } 应用于元素的颜色具有更高的覆盖应用于li元素的颜色。因此忽略了li颜色的变化。因此，您必须删除应用于a的样式，或将颜色更改应用于元素。

使用与当前页面相同的属性值更改“li”的颜色

2 个答案: