2

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

首先，我想创建一个工作页面，并在四列中显示缩略图，这很容易......我需要发生的是当点击缩略图时，完整的内容消失并被替换为完整的详细信息单击的特定缩略图（即，单击时 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;
  }
4

1 回答 1

0

试试这个

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();
        });
    });

​
于 2012-09-23T14:57:53.550 回答