我的页面上有以下 div
:
<div id="page1">
Some content
</div>
<div id="page2">
More content
</div>
<div id="page3">
Even more content
</div>
在页面底部,我有两个按钮Continue
和Back
- 我需要做的是根据用户输入显示和隐藏div。
默认情况下,当用户单击继续'
时,应显示page1
并隐藏其他页面,显示第2页,
第1页和第3页隐藏 - 如果用户单击
后退按钮,则会显示
page1`,而其他页面则隐藏,依此类推。
我完全不知道如何在 jQuery 中实现这一点 - 欢迎任何和所有帮助。
最佳答案
您需要将这些元素放入容器中,然后使用 prev
和 next
来遍历它们。像这样的事情:
$('.next').click(function() {
$('.sequence-container div').hide();
var $next = $('.sequence-container div:visible').next();
$next.length ? $next.show() : $('.sequence-container div:first').show();
});
$('.prev').click(function() {
$('.sequence-container div').hide();
var $prev = $('.sequence-container div:visible').prev();
$prev.length ? $prev.show() : $('.sequence-container div:last').show();
});
<小时/>
更新
要防止从开始/结束循环,请使用以下命令:
$('.next').click(function() {
var $next = $('.sequence-container div:visible').next();
if ($next.length) {
$('.sequence-container div').hide();
$next.show();
}
});
$('.prev').click(function() {
var $prev = $('.sequence-container div:visible').prev();
if ($prev.length) {
$('.sequence-container div').hide();
$prev.show();
}
});
关于php - jQuery - 根据用户输入显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17811608/