Question

我们有一个产品页面，我们分成两部分。我的目标是让它当你单击其中一个div时滑动以填充整个页面并显示产品。

HTML

<div>
    <div id="green" class="type1">Exterior products</div>
    <div id="red" class="type2">Interior products</div>    
</div>

CSS

.type1 {
    width:300px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.type2{
    width:300px;
    background-color:red;
    display:inline-block;
    height:320px;   
}

Answer 1

试试这个。 ;）

http://jsfiddle.net/ph31wyy3/1/

<强> HTML

<div>
    <div id="green" class="green block">eezez</div>
    <div id="red" class="red block">eezez</div>    
</div>

<强> CSS

.green {
    width:400px;
    background-color:green;
    display:block;
    height:320px;
  float: left;
}
.red{
    width:200px;
    background-color:red;
    display:block;
    height:320px;   
  float: left;
}

<强> JS

$(function() {
   $('.block').on('click', function(){
      $('.block').not(this).animate({'width' : '0' }, 500, function() { $(this).hide(); });
      $(this).animate({'width' : '100%'}, 500);
   });
});

Answer 2

使用以下jQuery（以及一些html / css更改），您可以得到：http://jsfiddle.net/Sj575/274/

$(function() {
 $(".green").click(function() {

    $(".red").toggleClass("hidden");
    $(".green").toggleClass("full")

});

$(".red").click(function() {

    $(".green").toggleClass("hidden");
    $(".red").toggleClass("full")

 });
});

编辑：这是另一个幻灯片，http://jsfiddle.net/Sj575/277/

JQuery：div幻灯片占据整页

2 个答案: