Я хочу показать только 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>
Вы можете использовать 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')
. Можно также использовать класс, чтобы отметить их все