0

jquery関数があります。div class ='open'をクリックすると、別のセッションが開き、ボタンによって画像が変更されます。cssのIDを切り替えます

ただし、ボタンをもう一度クリックすると、ボタンの画像を元に戻す必要があります。

    <script type="text/javascript">
        $(document).ready(function(){
                $(".content").hide();       
                $(".open1").click(function(){
                    $(this).next().slideToggle(400);
                                $('#btn_01').attr('id','btn_01_on');
                });
        });

</script>

<style>
#btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
    #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
    #btn_01_on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
</style)
4

3 に答える 3

2

IDを切り替えることは、確かに最善のアイデアではありません...on表示を変更するには、クラスを使用する必要があります。

<script type="text/javascript">
    $(document).ready(function(){
            $(".content").hide();       
            $(".open1").click(function(){
                $(this).next().slideToggle(400);
                var btn = $('#btn_01'), isOn = btn.hasClass('on');
                if(isOn) btn.removeClass('on') else btn.addClass('on');
            });
    });

</script>

<style>

    #btn_01{width:510px; height:109px; background:url('images/btn_01_on.png') no-repeat;}
    #btn_01:hover{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
    #btn_01.on{width:510px; height:109px; background:url('images/btn_01_over.png') no-repeat;}
</style>
于 2013-02-18T12:59:23.697 に答える
0

次のスクリプトスニペットを試してください。

   var prevId = "btn_01";
   var nextId = "btn_01_on";
   $(document).ready(function(){
        $(".content").hide();       
        $(".open1").click(function(){
            $(this).next().slideToggle(400);
            $(this).attr('id',function(index, id){
           return id==prevId?nextId:prevId;
        });
     });
  });

これで、前のIDに戻る必要があるときはいつでも、prevId変数を使用できます。このようにして、古い画像が表示され始めます。

于 2013-02-18T12:42:27.520 に答える
0

これを試して ：

$(document).ready(function () {
$(".content").hide();
$(".open1").click(function () {
    $(this).next().slideToggle(400);
    if ($(this).attr('id') == "btn_01") {
        $('#btn_01').attr('id', 'btn_01_on');
    } else {
        $('#btn_01_on').attr('id', 'btn_01');
    }
}
});
});
于 2013-02-18T12:43:13.063 に答える