Question

I have a menu. The menu tabs are images. I’d like that the image is changing after the click is done.

If I click then on another tab the image should transform to the old one. My idea was to work with .addClass() and .removeClass().

Here is the HTML:

<div class="navigation">

        <ul>
            <li id="1">
                <div id="menuImage1" class="menuImage"></div>
                <div class="menuText"><p>1</p></div>
            </li>
            <li id="2">
                <div id="menuImage2" class="menuImage"></div>
                <div class="menuText"><p>2</p></div>
            </li>
            <li id="3">
                <div id="menuImage3" class="menuImage"></div>
                <div class="menuText"><p>3</p></div>
            </li>
            <li id="4">
                <div id="menuImage4" class="menuImage"></div>
                <div class="menuText"><p>4</p></div>
            </li>
            <li id="5">
                <div id="menuImage5" class="menuImage"></div>
                <div class="menuText"><p>5</p></div>
            </li>
            <li id="6">
                <div id="menuImage6" class="menuImage"></div>
                <div class="menuText"><p>6</p></div>
            </li>
        </ul>

    </div>

JQuery(example for the first menu tab):

$(".navigation li").click(function() {
    $(".menuImage1").addClass('menuImageActive1');
    $(".menuImage1").not(this).removeClass('menuImageActive1');
});

Please can you Help me because my JavaScript isn’t that good.

Answer 1

I think you are looking for jquery mouseup (mouse button release) and mousedown (mouse button press) functions.

try code like:

$(".menuImage").mousedown(function() {
    $(this).addClass("class"); // new class on mouse button press
});


$(".menuImage").mouseup(function() {
    $(this).removeClass("class");  //remove class after mouse button release
});

Is this what you were looking for?