1

我正在创建一个实际上是一页的网站，但它由多个页面组成。

的HTML：

<p class="nav">
<a id="1" class="active" href="#">Home</a>
<a id="2" href="#">Our Designs</a>
<a id="3" href="#">Our Team</a>
<a id="4" href="#">Contact</a>
</p>
<div id="p1">
</div>
<div id="p2">
</div>
<div id="p3">
</div>
<div id="p4">
</div>

的CSS：

#p1,
#p2,
#p3,
#p4{
    display:none;
}
.pactive{
    display:block !important;
}

jQuery：

$("#1").click(function(){
  $(".active").toggleClass("active");
  $("#1").toggleClass("active");
  $(".pactive").fadeout(200);
  setTimeout(function(){
    $(".pactive").toggleClass("pactive");
  }, 200);
  setTimeout(function(){
    $("#p1").toggleClass("pactive");
  }, 200);
  setTimeout(function(){
    $(".pactive").fadein(200);
  }, 200);
});

每个链接都有一个

我怎样才能让它工作？

4

2 回答 2

3

尝试这个：

$(".nav a").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    var id = this.id;
    $(".pactive").fadeOut(200).promise().done(function(){
        $(".pactive").toggleClass("pactive");
        $("#p"+id).toggleClass("pactive");
        $(".pactive").fadeIn(200);
    });
});

此外，删除display : block !important.

在 this 函数中，this表示单击的元素。由于您使用数字作为 id（顺便说一句，这是一种不好的做法），因此您可以通过连接来轻松定位他的段落。

小提琴：http: //jsfiddle.net/kucx5/1/

于 2013-07-01T16:02:33.183 回答
1

这应该有效：

$(".nav").children("a").click(function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".pactive").fadeOut(200,function(){
      $(this).removeClass("pactive");   
  });
  $("#p" + this.id).fadeIn(200,function(){
      $(this).addClass("pactive"); 
  });
});

我将.toggleClass()调用更改为任一.addClass()或.removeClass()适用以使代码更具可读性...

另外，请确保正确调用.fadeOut()and .fadeIn()，因为您的代码具有fadeoutand fadein（全部小写）

JSFiddle 演示

于 2013-07-01T16:15:40.397 回答