Changing css class for li element problems

Question

Hi guys,

I have the following structure :

<ul id='myTopicsList'>

<li> 
<a><span> First Element </span></a>
</li>

.....

</ul>

The first time the page is loaded the first li will be selected by highliting it to background color blue.

The next time the user clicks another element in the list it should change to blue and the rest should have white background.

I am using this script :

function GetMyTopic(catID) {
 $('#myTopicsList li').each(function () {

        if ($(this).attr('id').indexOf(catID) > 0) {
            $(this).addClass('SideBarBoxliSelected');
        }
        else {
            $(this).addClass('SideBarBoxli');
        }
    });
}

here the css :

.SideBarBoxli{margin-bottom:4px; background-color:#fafafa; height:22px; }
.SideBarBoxli:hover {background-color:#E3ECF8; cursor:pointer; }
.SideBarBoxliSelected{margin-bottom:4px; background-color:#6388BF; height:22px; }

When I click and assign the SideBarBoxliSelected class to the cliked li the background remains the same.

Any suggestions?

Answer 1

Here is the html I would use:

<ul id="myTopicsList">
    <li class="SideBarBoxli SideBarBoxliSelected">first</li>
    <li class="SideBarBoxli">sec</li>
    <li class="SideBarBoxli">three</li>
    <li class="SideBarBoxli">four</li>
    <li class="SideBarBoxli">fiffff</li>
</ul>

Here is the code I would use:

$(document).ready(function() {
    $('ul#myTopicsList li').click(function() {
        $('li.SideBarBoxliSelected').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

The .click function will set it so that whenever someone clicks on any of the li items they will trigger the anonymous function which removes the class SideBarBoxliSelected from the currently selected one and adds it to the clicked item.

Edit

---

You can also add the following to make sure the first item has the class SideBarBoxliSelected on page load:

$('ul#myTopicsList li:first').addClass('SideBarBoxliSelected');

The above line would go on the line before the $('ul#myTopicsList li').click call.

---

Answer 2

When is GetMyTopic called? I would suggest using the Firebug plugin for Firefox to debug your javascript. Make sure the right CSS class is being applied to each LI involved in your test case. If not, you can figure out why by stepping through the script in the debugger. You can also check out the CSS in firebug to see what styles are getting applied.

Also, in your sample code you are using the 'id' attribute to identify list items, but you don't have an id attribute defined in your HTML or script. Maybe something is getting left out?

Answer 3

I'm not sure using the indexOf function is the best way to compare the id to your passed in variable. Maybe try using:

if ($(this).attr('id') == catID)

instead?

Answer 4

I think you need to add the period in front of "SideBarBoxliSelected" so .SideBarBoxliSelected

Answer 5

This is the simplest way to do it.

HTML

<ul id="myTopicsList">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

#myTopicsList li {background:#fafafa;margin-bottom:4px;height:22px;}
#myTopicsList li:hover {background:#E3ECF8;cursor:pointer;}
#myTopicsList li.active {background:#6388BF;}

jQuery

$(document).ready(function(){
    $('#myTopicsList li').click(function(e){
        // remove all active classes
        $('#myTopicsList li').removeClass('active');
        // add active class to clicked item
        $(this).addClass('active');
    });
    // click on the first item on page load
    $('#myTopicsList li').eq(0).click();
});