jquery 翻页问题，请求高手解决！

jqueryhtmlJavaScript

解决方案 »

  1.   


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="JS/jquery-1.7.2.js"></script>
        <script>
            $(function () {
                var num = $("li").length;
                var i = 0;
                var aArray = []
                $("li").each(function (index) {
                    if ($(this).css("display") == "none")
                        aArray.push(index);
                });
                $("li").eq(i).css("display", "block");
                $("li").eq(i).siblings().css("display", "none");
                $("input[type=button]").click(function () {
                    i++;
                    $("li").css("display", "none");
                    if ($.inArray(i, aArray) == -1) {
                        $("li").eq(i).css("display", "block");
                    }
                    else {
                        $("li").eq(i).css("display","none");
                    }
                    if (i == num) {
                        $("input[type=button]").hide();
                    }
                });
            })
        </script>
    </head>
    <body>
        <ul>
            <li>第1页内容</li>
            <li>第2页内容</li>
            <li style="display: none">第3页内容</li>
            <!--随机隐藏页,第2页至第N页都可能会出现-->
            <li>第4页内容</li>
            <li style="display: none">第5页内容</li>
            <!--随机隐藏页,第2页至第N页都可能会出现多个-->
            <li>第6页内容</li>
            <li>第7页内容</li>
            <li>第N页内容</li>
        </ul>
        <input name="" type="button" value="继续查看" /><!--最后一页不显示按钮-->
    </body>
    </html>
      

  2.   

    <ul>
            <li>第1页内容</li>
            <li>第2页内容</li>
            <li style="display: none">第3页内容</li>
            <!--随机隐藏页,第2页至第N页都可能会出现-->
            <li>第4页内容</li>
            <li style="display: none">第5页内容</li>
            <!--随机隐藏页,第2页至第N页都可能会出现多个-->
            <li>第6页内容</li>
            <li>第7页内容</li>
            <li>第N页内容</li>
        </ul>
        <input id = "next" name="" type="button" value="继续查看" /><!--最后一页不显示按钮-->$(function () {
        var ul = $("ul"),
    li = ul.find("li"),
    next = $("#next"),
    thisLi = null;

    li.filter(":visible").attr("data-visable","yes").not(":first").hide();
    thisLi = li.filter(":visible");

    next.on("click",function(){

    thisLi = thisLi.hide().nextAll("[data-visable=yes]:first");

    if(!thisLi.size()){
    next.hide();
    }else{
    thisLi.show();
    }
    });
    });
      

  3.   

    $(function () {
        var ul = $("ul"),
            li = ul.find("li"),
            next = $("#next"),
            thisLi = null;
         
        li.filter(":visible").attr("data-visable","yes").not(":first").hide();
        thisLi = li.filter(":visible");
         
        next.on("click",function(){
            var nextLi = thisLi.nextAll("[data-visable=yes]");
    //先所有后面的li的集合获取到

    if(nextLi.size() == 1){
    //如果后面的集合中，li的个数只有一个，
    //就可以把按钮隐藏
    next.hide();
    }

            thisLi.hide();
    //把当前的li隐藏

            thisLi = nextLi.filter(":first").show();
    //然后重新定义thisLi。对应的li显示
        });
    });可以的，比如这样。