0

メニューがあります。メニューのタブはイメージです。クリック後に画像が変わってほしいです。

別のタブをクリックすると、画像が古いものに変わります。私のアイデアは、.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 はあまり良くないので、助けてください。

4

2 に答える 2

0

jquery の mouseup (マウス ボタンを離す) および mousedown (マウス ボタンを押す) 関数を探していると思います。

次のようなコードを試してください:

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


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

これはあなたが探していたものですか？

于 2012-11-21T12:20:20.533 に答える
0

以下のように変更します...

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

jsコード

$("p").mousedown( function() { $('#menuImage1').attr('src',newurl); } );
$("p").mouseout( function() {$('#menuImage1').attr('src',oldurl);} );
于 2012-11-21T12:21:24.367 に答える