如何通过click-javascript更改图像

如何通过click-javascript更改图像,javascript,html,css,Javascript,Html,Css,我有一个有5个表格单元格的工具栏。第一个单元格看起来很清晰,其他4个单元格上方有阴影。我想这样做,点击表格单元格也会改变图像,这样阴影也会相对于当前选中的表格单元格改变 <script src="../../jquery-1.7.2.min.js" type="text/javascript"> $('table.stories-preview td').click((function () { var last_image = null; return

我有一个有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>

$('table.stories-preview td')。单击((函数(){
var last_image=null;
返回函数(){
如果(最后一张图片){
$('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(“选定”);
}
})());
$(文档).ready(函数(){
$(“.fade”).css(“显示”、“无”);
$(“.fade”).fadeIn(500);
函数重定向页面(){
window.location=linkLocation;
}
}); 
$(文档).ready(函数(){
$('.preview').hide();
$('#link_1')。单击(函数(){
$('#最新故事预览1')。隐藏();
$(“#最新的_故事_预览2”).hide();
$(“#最新的_故事_预览3”).hide();
$('#最新故事预览4').hide();
美元("最新报道"),法代因(800),;
});   
$('#link_2')。单击(函数(){
$(“#最新_story_main”).hide();
$(“#最新的_故事_预览2”).hide();
$(“#最新的_故事_预览3”).hide();
$('#最新故事预览4').hide();
$('最新故事预览1')。fadeIn(800);
});
$('#link_3')。单击(函数(){
$(“#最新_story_main”).hide();
$('#最新故事预览1')。隐藏();
$(“#最新的_故事_预览3”).hide();
$('#最新故事预览4').hide();
美元("最新报道"预告2),法代因(800),;
});
$('#link_4')。单击(函数(){
$(“#最新_story_main”).hide();
$('#最新故事预览1')。隐藏();
$(“#最新的_故事_预览2”).hide();
$('#最新故事预览4').hide();
$('最新故事预览3')。fadeIn(800);
});
$('#link_5')。单击(函数(){
$(“#最新_story_main”).hide();
$('#最新故事预览1')。隐藏();
$(“#最新的_故事_预览2”).hide();
$(“#最新的_故事_预览3”).hide();
美元("最新报道"预告4),法代因(800),;
});
});

回答一般问题,您可以使用javascript和CSS在单击时突出显示单个单元格。我拼凑了一张纸;你可以根据自己的目的调整它


这是给你的。

我正在尝试替换图像,现在我有jquery代码,允许我替换与表中的选择相关的div。但是我还想更改表本身,因此当选择与该表单元格对应的div时,该表单元格看起来不同。请将其精简为仅相关代码,并使用您所做的任何更改进行更新。我尝试将其应用到我的表中,但无法使其正常工作。它会干扰我的锚标签。我该怎么解决这个问题?定义干扰。发生了什么意外的复杂情况?好吧,我写的代码不应该导致这种情况,您有自定义修改吗?您需要使用相关代码不断更新我们,以便我们能够帮助您。上面是最新的代码,但我认为您的代码只适用于文本表格单元格,我的表格单元格是图像。好的,我没有看到您先前的消息,我将对其进行精简。我道歉