javascript - 淡出内容

Question

我遇到了一个大问题，我不知道该怎么做，我找到了类似的解决方案，但没有找到确切的解决方案，希望有人能帮助我，拜托。

首先我想创建一个工作页面，并且只在四列中显示缩略图，这很容易... 我需要做的是当单击缩略图时，完整的内容消失并被单击的特定缩略图的完整详细信息所取代(即单击时缩略图 1 将显示 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();
        });
    });

​