我有几个ul,我想一次只显示1,并使用上一个和下一个按钮来循环它们。
我在PHP中使用foreach来生成每个ul,其最大值为6 li。以及获得每个(itemX)的唯一id。
<ul class="itemWrap" id="itemX">
<li>Item 1</li>
<li>Item 2</li>
// ETC
</ul>
我想使用jquery将所有"itemWrap"设置为不显示,然后将id"item1"设置为在页面加载时显示块。
然后,当单击next/prev按钮时,将当前ul设置为不显示,并将next/prev-ul设置为显示块。
jQuery(document).ready(function(){
jQuery(".itemWrap").css("display", "none");
jQuery("#item1").css("display", "block");
var count = 1;
var item = jQuery("#item" + count);
jQuery(".prev").click(function(){
// do previous tab
jQuery.each(item, function() {
item.css("display", "none");
});
count--;
jQuery.each(item, function() {
item.css("display", "block");
});
});
jQuery(".next").click(function(){
// do next tab
jQuery.each(item, function() {
item.css("display", "none");
});
count++;
jQuery.each(item, function() {
item.css("display", "block");
});
});});
这就是我所拥有的,它可以将当前ul设置为不显示,但前提是没有任何内容告诉它将下一个/上一个ul设置为显示块。
请查看它是否对您有帮助。这是您的javascript
$(document).ready(function(){
$("#item1").addClass("active");
$(".prev").click(function(){
// do previous tab
var $el = $(".active").prev(".itemWrap");
if($el.length){
$(".itemWrap").each(function() {
$(this).removeClass("active");
});
$el.addClass("active");
}
});
$(".next").click(function(){
// do next tab
var $el = $(".active").next(".itemWrap");
if($el.length){
$(".itemWrap").each(function() {
$(this).removeClass("active");
});
$el.addClass("active");
}
});
});
这是你的css
.itemWrap
{
display:none;
}
.itemWrap.active
{
display:block;
}
这是小提琴
我认为应该使用DOM状态而不是js变量来确定下一步要隐藏或显示什么。这样就可以避免全局变量,并使用DOM的状态来确定行为。这里有一些快速代码(它需要边界检查和一些改进,但它应该让你开始):
$(document).ready(function(){
$(".itemWrap").hide();
$("#item1").show();
$("#prev").click(function(){
var currentVisible = $(".itemWrap:visible");
currentVisible.hide();
currentVisible.prev(".itemWrap").show();
});
$("#next").click(function(){
var currentVisible = $(".itemWrap:visible");
currentVisible.hide();
currentVisible.next(".itemWrap").show();
});
});
如果你想试试的话,这里有一把工作小提琴:http://jsfiddle.net/jj5q441o/4/
或者您可以使用我的jquery插件。
$(document).ready(function{
function loadPaging_content(offset_data){
var offset;//default value page button
if(offset_data){
offset = offset_data;
}else{
offset = 0;
}
var items = 10;//example
$('your LoadPage selector(In this div load Page)').xhrPagination({
sel: 'selector',//In this div created paging Links
totalCount: 'selector OR Number',
items: items
},
{
url:'//your URL',
dataLP:{offset: offset, items:items}
}
);
}
});
链接如下:https://github.com/WadimMakarenko/jquery-simple_ajax