Javascript 为什么每个按钮只工作一次？

我正在尝试为我创建的一些flash横幅创建一个div导航。我写的代码是按升序工作的，但是一旦你点击了一个，你就不能返回到它了。我如何使它像一个导航，每个标题可以重复点击任何顺序，它将工作

小提琴在这里： 代码如下：

HTML

JS

---

在将类添加到下一个页面之前，您需要从

的
页面中删除
当前的
类
from.removeClass（）
将执行以下操作：

function nextPage(to, type) {
    var to = $(to),
        from = $("#allPages .current");

    from.removeClass();
    to.addClass("current " + type + " in").one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function () {
        from.removeClass("current " + type + " out");
        to.removeClass(type + " in");
    });
    from.addClass(type + " out ");
}

演示：分号是函数nextpage:var to=$（to）中逗号的整数；他在声明另一个变量@AlexisPetersdamn，我变老了：/他实际上是个女人@丹妮拉，怀特
#main {
margin-left: 100px;
width: 1000px;
height: 700px;
border: 1px solid red;
overflow: hidden;
position: absolute;
top: 200px;
}

#allPages > div {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

#allPages > div.current {
display: block;
}

#page1 {
width: 1000px;
height: 700px;
background-color: red;
}

#page2 {
width: 1000px;
height: 700px;
background-color: grey;
}

#page3 {
width: 1000px;
height: 700px;
background-color: pink;
}

#page4 {
width: 1000px;
height: 700px;
background-color: green;
}

#page5 {
width: 1000px;
height: 700px;
background-color: orange;
}

#page6 {
width: 1000px;
height: 700px;
background-color: blue;
}

$(document).ready(function(){
    $("#black120").click(function(){
            nextPage("#page1","fade");
    });

    $("#black160").click(function(){
            nextPage("#page2","fade");
    });

    $("#blackMPU").click(function(){
            nextPage("#page3","fade");
    });

    $("#black728").click(function(){
            nextPage("#page4","fade");
    });

    $("#black300").click(function(){
            nextPage("#page5","fade");
    });

    $("#black970").click(function(){
            nextPage("#page6","fade");
    });
});

function nextPage(to, type){ 
var to = $(to),
    from = $("#allPages .current");

to
.addClass("current " + type + " in")
.one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function(){
  from.removeClass("current " + type + " out" );
  to.removeClass(type + " in");
});
from.addClass(type + " out ");
}

function nextPage(to, type) {
    var to = $(to),
        from = $("#allPages .current");

    from.removeClass();
    to.addClass("current " + type + " in").one("webkitAnimationEnd msAnimationEnd animationend oAnimationEnd", function () {
        from.removeClass("current " + type + " out");
        to.removeClass(type + " in");
    });
    from.addClass(type + " out ");
}