Question

我正在努力创建一个实际上是一个页面的网站，但它包含多个页面。

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

每个链接都有一个

如何让它发挥作用？

Answer 1

试试这个：

$(".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表示单击的元素。由于你使用数字作为id（顺便说一下这是一种不好的做法），你可以通过连接来轻松地定位他的段落。

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

Answer 2

这应该有效：

$(".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()和.fadeIn()，因为您的代码有fadeout和fadein（全部小写）

JSFiddle Demo

基于jquery的导航，用于一页网站中的多个页面

2 个答案: