Question

I’ve a very simple question but can’t figure it out by myself.
i’ve the following problem.

i’ve several list items like below.

<li></li>
            <li>
                <img src="images/persoon1.jpg" alt="persoon1">
                <div id="infoPersoon">
                    <h3>Jaap-Jan van der Gouw</h3>
                    <ul id="contactInfo">
                        <li class="label">T</li>
                        <li>070 31 31 066</li>
                        <li class="label">F</li>
                        <li>070 31 31 066</li>
                        <li class="label">M</li>
                        <li>070 31 31 066</li>
                    </ul>
                    <ul id="contactOpties">
                        <li class="email"><a href="#" class="active">Email</a></li>
                        <li class="publicaties"><a href="#">Publicaties</a></li>
                        <li class="vcard"><a href="#">Vcard</a></li>
                        <li class="meerinfo"><a href="#">Meer info</a></li>
                    </ul>
                </div>
            </li>
            <li></li>

the problem is that i want to add a class by the current list i clicked on, and when i clicked to the next list item, the previous class “active” must be remove.

how can i solve that problem.

Answer 1

The most common approach is to remove the active class from any tag that has it like:

$(".active").removeClass("active");

To put it all together would be:

$("li").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});