Затухающий контент

Question

У меня огромная проблема, и я не знаю, как это сделать, я нашел похожие решения, но не точное решение, и надеюсь, что есть кто-то, кто может мне помочь, пожалуйста.

Прежде всего, я хотел бы создать рабочую страницу и просто отобразить миниатюры в столбце из четырех, что достаточно просто... то, что мне нужно, - это когда щелкают по миниатюре, весь контент исчезает и заменяется полной информацией о конкретный миниатюрный объект, по которому щелкнули (т. е. thumbnail1 при нажатии, вызовет div thumbnail1 content content).... с обратной ссылкой, возвращающей пользователя к миниатюрам....

Моя задача не в том, чтобы перейти на другую страницу, а остаться на этой странице... поэтому я и прошу помощи, так как это было бы проще...

я действительно хочу добиться следующего 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();
        });
    });

​