使用javascript为消息创建单独的页面？

好吧，这个问题可能有点让人困惑。我在messages.php页面中有下面的javascript，它控制将显示哪个div。每个div都有一个单独的函数

message-content-p1包含一个while循环，该循环获取所有消息并将其限制为20条消息，第二个是message-content-p2，依此类推，每个while循环包含下一个while循环，每个while循环中仅显示20条消息

这个javascript的想法是创造一种错觉，即在第2页、第3页等等都会显示更多的消息

到目前为止，javascript在点击“m_p1”或“m_p2”时显示每个div，并淡出当前页面，在下一页面淡出。这对该函数很有用。我遇到的问题是，如果用户想跳过一页，转到第3页或第5页，而不转到第2页或第4页，那么脚本将无法工作，任何内容都不会淡入或淡出

与wise类似，如果用户从第5页返回到第1页，脚本将不起作用，并且不会淡出第5页和淡入第1页

有没有一种方法可以做到我所描述的，如果有，请有人告诉我如何做

多谢各位

 <script>
    $(".message-content-p2").hide();
    $('.m_p2').click(function () {
        if ($('.message-content-p2').is(":hidden")) {       
      $('.message-content-p1').fadeOut(500);
      $('.message-content-p2').delay(700).fadeIn(500);


        }

      });

    </script>


    <script>
    $(".message-content-p3").hide();
    $('.m_p3').click(function () {
        if ($('.message-content-p3').is(":hidden")) {       
      $('.message-content-p2').fadeOut(500);
      $('.message-content-p3').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p4").hide();
    $('.m_p4').click(function () {
        if ($('.message-content-p4').is(":hidden")) {       
      $('.message-content-p3').fadeOut(500);
      $('.message-content-p4').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p5").hide();
    $('.m_p5').click(function () {
        if ($('.message-content-p5').is(":hidden")) {       
      $('.message-content-p4').fadeOut(500);
      $('.message-content-p5').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p6").hide();
    $('.m_p6').click(function () {
        if ($('.message-content-p6').is(":hidden")) {       
      $('.message-content-p5').fadeOut(500);
      $('.message-content-p6').delay(700).fadeIn(500);


        }

      });

    </script>

$（“.message-content-p2”）.hide（）；
$（'.m_p2'）。单击（函数（）{
如果（$（'.message-content-p2'）。是（“：hidden”）{
$（'.message-content-p1'）。淡出（500）；
$（'.message-content-p2'）。延迟（700）。fadeIn（500）；
}
});
$（“.message-content-p3”）.hide（）；
$（'.m_p3'）。单击（函数（）{
如果（$（'.message-content-p3'）。是（“：hidden”）{
$（'.message-content-p2'）。淡出（500）；
$（'.message-content-p3'）。延迟（700）。fadeIn（500）；
}
});
$（“.message-content-p4”）.hide（）；
$（'.m_p4'）。单击（函数（）{
如果（$（'.message-content-p4'）。是（“：hidden”）{
$（'.message-content-p3'）。淡出（500）；
$（'.message-content-p4'）。延迟（700）。fadeIn（500）；
}
});
$（“.message-content-p5”）.hide（）；
$（'.m_p5'）。单击（函数（）{
如果（$（'.message-content-p5'）。是（“：hidden”）{
$（'.message-content-p4'）。淡出（500）；
$（'.message-content-p5'）.delay（700）.fadeIn（500）；
}
});
$（“.message-content-p6”）.hide（）；
$（'.m_p6'）。单击（函数（）{
如果（$（'.message-content-p6'）。是（“：hidden”）{
$（'.message-content-p5'）。淡出（500）；
$（'.message-content-p6'）。延迟（700）。fadeIn（500）；
}
});

这看起来都是非常手动的，对于任何数量的页面都不是非常可伸缩的

为什么不让每个“页面”都有相同的类，在单击确定要跳到哪些页面的控件时，只淡出所有页面，然后只淡入与所单击控件的索引值对应的页面？例如，假设您所有的消息“页面”都有class

.messagecontent

，假设您有一组按钮，所有这些按钮都有class

.m

。您的jQuery可以简单地如下所示：

$('.m').click(function() {
    $('.message-content').fadeOut(500);
    var index = $(this).index();
    $('.message-content').get(index).delay(700).fadeIn(500);
}

---

嗯，我可以，但对不起，我不明白它怎么知道哪个div要淡入淡出？此时，“message-content-p1”或“message-content-p2”的每个sperate div都有一个标记为get_messages1、get_messages2等的sql函数。你能把这段代码放在一个演示中，或者再解释一下吗？所有的类都是一样的，但是id是不同的吗？@johnsimons你有X个页面和X个按钮、链接或者其他可以显示这些页面的东西。我假设按钮1（位于按钮集合中的索引[0]）将对应于页面1（位于页面集合中的索引[0]）。因此，您只需要知道所按下按钮的索引即可知道要显示的页面的索引。在这种情况下，根本不需要“message-content-1”类型的ID。@约翰斯蒙斯只是想让你按照更“jQuery”的方式做事。您目前所做的是使用jQuery 1%的功能来显示/隐藏内容，而jQuery的DOM操作功能的真正功能是能够跨DOM节点集合进行操作。