0

<li>li が超過した場合に div に4 のみを表示したい場合は、次と前の矢印マークを表示します。

ここでは、ul タグ内に litag を水平方向に表示しています。各名前に境界線を付け、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 つの要素ごとに次のボタンを追加できます。next と back を使用してナビゲートできるように、div first、second、three をそれぞれ親 div に追加しました。

ここでフィドル：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 に答える