淡出内容

Question

我遇到了一个大问题，我不知道怎么做，我找到了类似的解决方案但不是确切的解决方案，希望有人可以帮助我，请。

首先，我想创建一个工作页面，只需在四列中显示缩略图，这很容易...... 我需要发生的是当点击缩略图时，完整的内容消失，并被点击的特定缩略图上的完整详细信息替换（即点击时的thumbnail1将调出thumbnail1内容div）....带有反向链接，带用户回到缩略图....

我的任务不是转到不同的页面，而是留在页面上...因此我为什么要求帮助，因为这会更容易选择......

我真的希望实现以下http://www.charliegentle.co.uk/如果你点击网页设计然后点击缩略图，你可以看到后面的效果..

我发现的最接近的例子是下面，唯一的问题是我不想要菜单栏系统，即使我确实将菜单栏更改为缩略图，缩略图仍将保留在屏幕上，那不是我的意思想...

请帮助......以下是可以使用的代码http://jsfiddle.net/buScL/21/

HTML

<div id="wrapper">
  <ul id="controlls">  
      <li><a href="#" id="one" class="dealer">Dealer</a></li>
      <li><a href="#" id="two" class="advertise">Advertise</a></li>
      <li><a href="#" id="three" class="social">Social Media</a></li>
      <li><a href="#" id="four" class="need">Need</a></li>
  </ul>


    <div id="slider">  

        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>

和

的Javascript

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('class');
    $('#slider div:visible').fadeOut(500, function() {
        $('div#' + id).fadeIn();
    })
});

和css

p { font-size:150%; cursor:pointer; }

  #wrapper{
      width: 700px;
      height: 400px;
      background: #a5a5a5;
      margin: 100px auto 0 auto;
  }

  #slider{
      width: 450px;
      overflow: hidden;
  }

  #dealer{
  float: left;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: pink;
  }

  #advertise{
    float: left;

  display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: lime;
  }
  #social{
    float: left;

    display: none;  
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: purple;
  }
  #need{
    float: left;

    display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: yellow;
  }




  ul#controlls{
  padding: 10px 0;
  height: 60px;
  }

  ul#controlls li{
      display: inline;
      padding: 5px 10px;
  }

Answer 1

试试这个

http://jsfiddle.net/buScL/32/

 p { font-size:150%; cursor:pointer; }

  #wrapper{
      width: 700px;
      height: 400px;
      background: #a5a5a5;
      margin: 100px auto 0 auto;
  }

  #slider{
      width: 450px;
      overflow: hidden;
  }
  #slider > div {
   display:none;
}
#back {
   display:none;            
}
  #dealer{
  float: left;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: pink;
  }

  #advertise{
    float: left;

  display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: lime;
  }
  #social{
    float: left;

    display: none;  
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: purple;
  }
  #need{
    float: left;

    display: none;
      margin: 0 auto;
      width: 450px;
      height: 200px;
      background: yellow;
  }




  ul#controlls{
  padding: 10px 0;
  height: 60px;
  }

  ul#controlls li{
      display: inline;
      padding: 5px 10px;
  }
​

<div id="wrapper">
  <ul id="controlls">  
      <li><a href="#dealer" id="one" class="">Dealer</a></li>
      <li><a href="#advertise" id="two" class="">Advertise</a></li>
      <li><a href="#social" id="three" class="">Social Media</a></li>
      <li><a href="#need" id="four" class="">Need</a></li>
  </ul>
    <div id="back"><a href="#">Back</a></div>

    <div id="slider">  

        <div id="dealer">
            <p>If you click on this paragraph
              you'll see it just fade away.
            </p>
        </div>
        <div id="advertise">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="social">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
        <div id="need">
            <p>If you click on this paragraph
            you'll see it just fade away.
            </p>
        </div>
    </div>
</div>
​

$("#controlls li a").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
        $(id).fadeIn();
        $('#back').show();
        $('#controlls').hide();
});

    $('#back a').click(function() {
        $('#slider div:visible').fadeOut(function () {
            $('#controlls').fadeIn();
            $('#back').hide();
        });
    });

​