How do I change the colour of the first LI value that is added through a XMLHttpRequest?

I am working on a project where the user can go to a particular page and browse a particular feed. This feed is dynamically added through an XMLHttpRequest, which will give a #Cat=(value) parameter to the PHP parser, which will then carry out the appropriate action.

Within this page, there are several LI elements that will be used for the user to filter/cycle through the feeds.These LI elements will be different for each page - they are dynamically added from the database.

I have successfully managed to change the colour of the LI whenever the user clicks on that particular LI or if the URL changes to include the category.

I have done this by: downloading all categories from the database, and displaying them appropriately. I then get the #Cat= value from the URL, and perform a switch statement - if the Cat value equals the LI value, then change the LI value's colour.

My problem, however, is that the first LI (regardless of the page, it isn't a typo) will not change. For example: one page will have the url #Cat=Front Page, if I click on the category Front Page it will not change because it is the first LI. On another page, the url will also be #Cat=Front Page and if I click on the category Front Page it will change the colour because it is not the first LI.

I presume it is my JavaScript/JQuery that is causing the issue.

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++;
}

My Question: when the category is default, how do I change the colour of the first LI? Also when viewing the first LI, how do I change the colour of it?

Any help would be greatly appreciated.

Thanks.

EDIT: Thanks to everyone who tried to help me. I do not understand why my code was not working, but I have implemented a work around: when the first li is added, I am adding a unique class name to its anchor tag - and to select the first li I am merely searching for that class name.