обработка вкладок в div с next и previous

Question

обработка вкладок в div с next и previous

0

Я хочу показать только 4 <li> в div, если li s превышают, тогда я хочу показать следующую и предыдущую стрелки.

Здесь я показываю litags горизонтально внутри тега ul, и я предоставил границу для каждого имени, и я подключил 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>

Naresh Kallamadi 24 сен. 2013, в 09:16

Источник

Теги:

jquery

1 ответ

Ещё вопросы

aelor · Accepted Answer · 2013-09-24T04-14-00.000Z

Вы можете использовать jquery примерно так, чтобы добавить следующую кнопку на каждые 4 элемента. Я добавил div первый, второй и третий соответственно в родительский 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();
           }
    });
});

Я знаю, что это выглядит уродливо, но это все, что я мог придумать.

Приветствия!

К вашему сведению: $('#second').hide(); $('#third').hide(); .. можно записать как $('#second, #third, #prev') . Можно также использовать класс, чтобы отметить их все
Извините за поздний ответ спасибо за ваш ответ
@NareshKallamadi np вы можете пометить мой ответ как правильный, если он вам помог;)