Question

我想在div中只显示4 <li> s如果li超过，那么我想显示下一个和前一个箭头标记。

这里我在ul标签中水平显示litags，我为每个名称提供了一个边框，我将li连接到也是li标签的li hr标签。

这里我的代码是：

                  <html>
                   <div id="parentDiv" width="60%">
                   <ul id="progressbar">

        <li class="active" >
                 <div class="childformNames"> 
                    basic info
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames "> 
                    Personal details
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Address Info
                </div>
        </li>
        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Sports Info
                </div>
        </li>

        <li class="active"> 
            <div style="margin-left: -1px; margin-right: 140px;">
                <hr>
            </div>
        </li>

        <li class="active fromSecondli" >
                 <div class="childformNames"> 
                    Village Info
                </div>
        </li>

        </ul>
        </div>


                     <html>

Answer 1

您可以使用类似这样的jquery在每4个元素上添加下一个按钮。我已经将div第一，第二和第三分别添加到父div中，以便能够使用next和back进行导航。

在这里摆弄：http://jsfiddle.net/exgFT/1/

$(document).ready(function() {
  $("#second").hide();
  $("#third").hide();
  $("#prev").hide();
    $("#next").on('click', function() {
        if(!$("#second").is(":visible"))
       {
        $("#second").show();
        $("#first").hide();
        $("#prev").show();
       }
           else 
           {
               $("#third").show();
               $("#second").hide();
               $("#prev").show();
           }
    });

    $("#prev").on('click', function() {
        if(!$("#second").is(":visible"))
       {
        $("#third").hide();
        $("#second").show();
       }
           else 
           {
               $("#first").show();
               $("#second").hide();
               $("#prev").hide();
           }
    });
});

我知道它看起来很难看，但这就是我能想到的。

干杯！

使用next和previous处理div中的选项卡

1 个答案: