-3

5つのテーブルセルがあるツールバーがあります。最初のセルはクリアに見え、他の4つのセルはそれらの上に陰影があります。テーブルセルをクリックすると画像も変更され、現在選択されているテーブルセルに対して色合いも変更されるようにしたいと思います。

<script src="../../jquery-1.7.2.min.js" type="text/javascript"> 

    $('table.stories-preview td').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('table.stories-preview .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'http://i1251.photobucket.com/albums/hh544/kochb/th_checklist_on.png').addClass('selected');
    }
})());


     $(document).ready(function() {
    $(".fade").css("display", "none");

    $(".fade").fadeIn(500);



    function redirectPage() {
        window.location = linkLocation;
    }
}); 

    $(document).ready(function() {

     $('.preview').hide();

  $('#link_1').click(function(){ 
      $('#latest_story_preview1').hide();
       $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_main').fadeIn(800);
  });   

  $('#link_2').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview1').fadeIn(800);
  });

  $('#link_3').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview1').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview2').fadeIn(800);
  });

    $('#link_4').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview3').fadeIn(800);
  });
    $('#link_5').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').fadeIn(800);
  });





    });

</script>




    <table class="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <a id="link_1" href="#"> <img src="../../Images/N&EImages/images-con-1/Article-Nav-Bar1_01.gif" width="330" height="114" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a id="link_2" href="#"> <img src="../../Images/N&EImages/images-con-1/Article-Nav-Bar1_02.gif" width="330" height="109" alt=""> </a></td>
    </tr>
    <tr>
        <td>
        <a id="link_3" href="#"> <img src="../../Images/N&EImages/images-con-1/Article-Nav-Bar1_03.gif" width="330" height="132" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a id="link_4" href="#"><img src="../../Images/N&EImages/images-con-1/Article-Nav-Bar1_04.gif" width="330" height="124" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a id="link_5" href="#"><img src="../../Images/N&EImages/images-con-1/Article-Nav-Bar1_05.gif" width="330" height="119" alt=""></a></td>
    </tr>
</table>
4

1 に答える 1

0

一般的な質問に答えると、javascriptとCSSを使用して、クリック時に個々のセルを強調表示できます。私はJSフィドルの例を一緒に投げました; あなたはそれをあなたの目的に適応させることができます。

そして、これがあなたのために画像を交換できるバージョンです。

于 2012-07-11T15:14:07.827 に答える