JQuery 菜单的问题

Question

我有一个菜单。菜单选项卡是图像。我希望单击完成后图像会发生变化。

如果我单击另一个选项卡，图像应转换为旧选项卡。我的想法是使用 .addClass（） 和 .removeClass（）。

这是 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（第一个菜单选项卡的示例）：

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

请你能帮帮我，因为我的JavaScript不是那么好。

Answer 1

我想你正在寻找jquery鼠标向上（鼠标按钮释放）和鼠标向下（鼠标按钮按下）函数。

尝试以下代码：

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

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

这是你要找的吗？

Answer 2

执行以下操作...

<img id="menuImage1" src="oldurl" class="menuImage"></img>

JS代码

$("p").mousedown( function() { $('#menuImage1').attr('src',newurl); } );
$("p").mouseout( function() {$('#menuImage1').attr('src',oldurl);} );