点击图片div内容变化

我想做一个网页，里面有7-8张图片吧，下面想放个div,当没有点击图片时，div里出现一个默认内容，当点击不同图片时，div里的内容变化，但页面不刷新，谁有例子，给我参考一下，谢谢。

解决方案 »

  1.   

    楼主要的是这种效果吗？
    http://jsfiddle.net/SVKke/
      

  2.   

    回showenxxx。
    不全是你那样的。刚打开那个页面的时候，div里默认显示默认内容吧。
    当点击图片时，该div显示相关图片的描述。
      

  3.   

    这样呢？
    http://jsfiddle.net/SVKke/1/
      

  4.   

    差不多了，那个src里能否贴一些html的代码？
    在div展示层里，点击了是展示一些图片的描述信息，里面应该有些css来控制，添加一些样式，使得这些描述好看点。
      

  5.   

    还有，那个能否用div的id 来控制，因为你现在这样写，$("div").html($(this).attr("src"))
    会影响我其他div的。
      

  6.   

    当然可以，提供一种做法，看代码
    http://jsfiddle.net/SVKke/2/
      

  7.   

    怎么我运行时出错呢？<!DOCTYPE html> 
    <html> 
    <head> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
      <title> - jsFiddle demo</title> 
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.js'></script> 
      
      <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
      <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
      
      <style type='text/css'> 
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    fieldset,img { 
    border:0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
    }
    ol,ul {
    list-style:none;
    }
    caption,th {
    text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
    }
    q:before,q:after {
    content:'';
    }
    abbr,acronym { border:0;}
    body {background: white; padding: 10px;  }
      </style> 
      
      <script type='text/javascript'> 
      //<![CDATA[ 
      $(function(){
      $("img").click(function() {
        $("#result").html($(this).attr("content"))
    });
      });
      //]]> 
      </script> 
      
    </head> 
    <body> 
    <img src='http://farm6.static.flickr.com/5060/5519012954_c74bb31e1a_m.jpg' content="<STRONG>Black Cat</STRONG>"/> 
    <img src='http://farm6.static.flickr.com/5056/5518447361_162250bd67_m.jpg' content="<STRONG>Black & White Cat</STRONG>"/> 
    <img src='http://farm6.static.flickr.com/5173/5519029660_33435240a8_m.jpg' content="<STRONG>Wellow Cat</STRONG>"/> 
     
    <div id="result">Welcome..........<div> 
      
    </body> 
     
     
    </html> 
     
      

  8.   

    上面代码FF,IE测试过,没有问题啊。出什么错？
      

  9.   

    楼主试试对jquery的引用改成本机文件，图片也改成本机文件