如何更改通过 XMLHttpRequest 添加的第一个 LI 值的颜色？

Question

我正在开展一个项目，用户可以在该项目中转到特定页面并浏览特定提要。此提要通过XMLHttpRequest 动态添加，这将为PHP 解析器提供#Cat=(value) 参数，然后PHP 解析器将执行相应的操作。

在此页面中，有几个 LI 元素将用于用户过滤/循环浏览提要。这些 LI 元素对于每个页面都是不同的 - 它们是从数据库中动态添加的。

每当用户单击特定 LI 或 URL 更改为包含类别时，我都成功地更改了 LI 的颜色。

我通过以下方式做到了这一点：从数据库中下载所有类别，并适当地显示它们。然后我从 URL 中获取 #Cat= 值，并执行 switch 语句 - 如果 Cat 值等于 LI 值，则更改 LI 值的颜色。

然而，我的问题是第一个 LI（无论页面如何，它都不是错字）不会改变。例如：一个页面将有 url #Cat=Front Page，如果我点击类别 Front Page 它不会改变，因为它是第一个 LI。在另一个页面上，url 也将是#Cat=Front Page，如果我点击 Front Page 类别，它会改变颜色，因为它不是第一个 LI。

我认为是我的JavaScript/JQuery 导致了这个问题。

JavaScript/JQuery:

activeCat("Default");

$(window).on( "hashchange", function()
{
    var Url = window.location.href;
    var Category = Url.substring(Url.indexOf("#Cat=") + 5);
    var Cat = decodeURI(Category);
    activeCat(Cat);
});

function activeCat(cat)
{
    switch (cat)
    {
        case "Default":
            $("#channelCategories li").first().css("color", "#2980b9");
            break;
        case "Front Page":
            $('ul li').each(function(i)
            {
                if($(this).hasClass('channelCategory'))
                {
                    $(this).css("color","black");
                }
            });
            alert("Channel has front-page category");
            $("#channelCategories li:contains('Front Page')").css("color", "#2980b9");
            break;
        case "United Kingdom":
            $('ul li').each(function(i)
            {
                if($(this).hasClass('channelCategory'))
                {
                    $(this).css("color","black");
                }
            });
            $("#channelCategories li:contains('United Kingdom')").css("color", "#2980b9");
            break;

PHP:

while($record = mysqli_fetch_array($myData))
{
    $Category = $record["Category"];
    if($i <= 5)
    {
        $html .=    "<a href='#Cat=$Category' class='noLink' id='$Category'><li class='channelCategory noLink Text'>$Category</li></a>";
    }
    else if ($i > 5)
    {
        //$dropContent[$j] .= "<a href='#Cat=$Category'><li class='channelCategory itemLink Text'>$Category</li></a>";
        $dropContent[$j] .= $Category;
        $j++;
    }
    $i++;
}

我的问题：当类别为默认时，如何更改第一个 LI 的颜色？另外在查看第一个LI时，如何更改它的颜色？

任何帮助将不胜感激。

谢谢。

编辑：感谢所有试图帮助我的人。我不明白为什么我的代码不起作用，但我已经实现了一个解决方法：添加第一个 li 时，我在其锚标记中添加一个唯一的类名 - 并选择第一个 li 我只是在搜索那个班级名称。

Answer 1

尝试将标签<a> 中的id 替换为class（带有id 的jQuery 选择器始终获得第一项）然后尝试添加/删除类（$( ).addClass('firstDefault') 并使用css 更改颜色。

调试一下，var Cat 真的带有“默认”值吗？