0

<li>如果超过 li ，我只想在 div 中显示 4秒，然后我想显示下一个和上一个箭头标记。

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

我的代码是：

                  <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>
4

1 回答 1

1

您可以使用类似这样的 jquery 在每 4 个元素上添加一个下一步按钮。我已将 div first、second 和 third 分别添加到父 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();
           }
    });
});

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

干杯！

于 2013-09-24T07:08:43.617 回答