我正在尝试使用 jQuery 创建一个多页面导航,当我们更改页面时,当前页面会受到 slideUp() 的影响并消失。
直到现在我有这个 JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
在此运行:http://jsfiddle.net/93gk3oyg/
我似乎无法正确地从第 1 页导航到第 3 页,从第 3 页导航到第 2 页,依此类推...
任何帮助将不胜感激:)
最佳答案
我对您的代码进行了一些重构。实际上,我没有使用任何向上滑动功能,所有内容都是使用 CSS 动画处理的,这意味着您稍后可以将它们更改为其他内容。另请注意,这意味着您真的不需要弄乱 z-index。 HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
这是 fiddle :http://jsfiddle.net/93gk3oyg/9/
关于javascript - 使用 jQuery slideUp() 动画的页面导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31034687/