0

css、jquery、および html を使用してプロジェクト Web サイトを開発しています。何が起こるかというと、htmlには3列しかないテーブルがあり、ボタンとして使用する画像を配置して、ボタンの下のコンテンツを切り替えています。コードは次のとおりです。

<table id='buttom-service'>
            <tr>
                <td class="selectors">
                    <img src="images/icon1.png" id='ser_bt1'alt="Radiocomunicacion" />
                </td>
                <td class="selectors">
                    <img src="images/icon2.png" id='ser_bt2' alt="Arquitectura" />
                </td>
                <td class="selectors">
                    <img src="images/icon3.png" id='ser_bt3' alt="Radiocomunicacion"/>
                </td>
            </tr>
        </table>

ここで、jquery を使用して画像をボタンとして機能するようにします。

$(document).ready(function(){
   //default load
   $('#buttom-service').addClass('hover');

   //action buttoms
   $('#ser_bt1').click(function(){
    do stuff;

   });
   $('#ser_bt2').click(function(){
    do stuff;

   });
   $('#ser_bt3').click(function(){
    do stuff

   });});

これに関する問題は、最初の 2 つの画像のクリック可能な領域が画像全体ではなく下部に縮小されることですが、3 番目の要素は正常に機能します。（彼らはコンテンツをうまく切り替えます）3つの画像をボトムとして適切に機能させる方法についてアドバイスが必要です。(クリッカブルエリア)

ありがとうございました

4

2 に答える 2

0

代わりにボタン タグを使用してみてください。クリック リスナーをボタンにアタッチし、css でボタンの背景としてイメージを設定します。

于 2013-07-13T08:56:56.963 に答える
0

どうでしょう…？

$('#ser_bt1,#ser_bt2,#ser_bt3').closest('.selectors').on('click',function(){
    //do stuff
});
于 2013-07-13T08:54:40.093 に答える