Question

我想制作3ximage按钮，它就像一个普通的nav.menu只是图像。当image1处于活动状态时 - 显示image1-red，当image2处于活动状态时，显示image2-red（但只有活动图像为红色而不是所有图像）等等

不是背景图片

<script type="text/javascript">      
    $("#button1").click(function () {
        $(".buttons").removeClass("active");
        $(this).addClass("active");
            $(".active-img").attr("src", "images/homo-hover.png");
        });

        $("#button2").click(function () {
            $(".buttons").removeClass("active");
        $(this).addClass("active");
           $(".active1-img").attr("src", "images/nohomo-hover.png");
        });

        $("#button3").click(function () {
            $(".buttons").removeClass("active");
        $(this).addClass("active");
            $(".active2-img").attr("src", "images/homo-digitalis-hover.png"); });

    });      
</script>

Answer 1

这是一种简单的方法..

    <div id="button1" class= "blocks buttons"><img src="images/homo.png" class="active-img"/></div> 
    <div id="button2" class= "blocks buttons"><img src="images/nohomo.png" class="active1-img"/></div> 
    <div id="button3" class= "blocks buttons" ><img src="images/homo-digitalis.png" class="active2-img"/></div>
       <script>
            $("#button1").click(function () {
                $(".buttons").removeClass("active");
                $(this).addClass("active");
                $(".active-img").attr("src", "images/homo-hover.png");

                // reset the other two images
                $(".active2-img").attr("src", "images/nohomo.png");
                $(".active3-img").attr("src", "images/homo-digitalis.png");
            });

            $("#button2").click(function () {
                $(".buttons").removeClass("active");
                $(this).addClass("active");
                $(".active1-img").attr("src", "images/nohomo-hover.png");

                // reset the other two images
                $(".active-img").attr("src", "images/homo.png");
                $(".active3-img").attr("src", "images/homo-digitalis.png");
            });

            $("#button3").click(function () {
                $(".buttons").removeClass("active");
                $(this).addClass("active");
                $(".active2-img").attr("src", "images/homo-digitalis-hover.png"); 

                // reset the other two images
                $(".active1-img").attr("src", "images/homo.png");
                $(".active2-img").attr("src", "images/nohomo.png");                   
            });


        </script>

图像按钮＆＃34; onclick＆＃34;更改

1 个答案: