我有几个 div 隐藏在父级的溢出中，并让它们在单击相应的导航菜单项时动画化到 View 中，但我希望每个 div 在打开另一个 div 后返回到其原始位置。每个 div 和 nav 项目都有一个单独的对应 id。
代码如下。
我知道这里已经有很多类似的问题，但我对 Jquery 还很陌生，所以任何帮助都会很棒。
var sipPos = 0;
$(document).ready(function() {
$("#news").click(function(e) {
e.preventDefault();
$("#tab1").animate({ bottom: sipPos }, 600, 'linear', function() {
if(sipPos == 0) { sipPos = -800;}
else { sipPos = 0; }
});
});
});
*抱歉 html 如下
<!DOCTYPE html>
<html>
<div id="content">
<nav><strong>
<ul>
<li><a href="#" title="News" id="news">NEWS <span class="slash">//</span> </a></li>
<li><a href="#" title="Dates" id="dates">LIVE DATES <span class="slash">//</span></a></li>
<li><a href="#" title="Media" id="media">MEDIA <span class="slash">//</span></a></li>
<li><a href="#" title="Band" id="band">BAND <span class="slash">//</span></a></li>
<li><a href="#" title="Community" id="community">COMMUNITY <span class="slash">//</span></a></li>
<li><a href="#" title="Merchandise" id="merch">MERCHANDISE <span class="slash">//</span></a></li>
</ul></strong>
</nav>
<div id="tab1">
</div>
<div id="tab2">
</div>
<div id="tab3">
</div>
<div id="tab4">
</div>
<div id="tab5">
</div>
</div>
编辑
已为所有导航链接提供一类选项卡，为 div 提供一类幻灯片。
$(document).ready(function() {
$(".slide");
lastMove = 0;
$(".tab").click(function() {
divIndex = $(this).index(); // this index relates to the ordered div list
if (lastMove.length > 0) {
$(lastMove).animate({"bottom": "-=800px"}, "slow");
}
lastMove = $(".slide:eq("+divIndex+")");
$(lastMove).animate({"bottom": "+=800px"}, "slow");
});
});
第一个选项卡现在为每个导航项目打开，而不是每个相应的 div，索引问题？
最佳答案
嗯，
你的意思是这样的: http://jsfiddle.net/NWMZJ/1/
//css
.moveDiv {
position:absolute;
left:50px;
top:50px;
display: block;
}
<div class="moveDiv" id="1">content1content1content1</div>
<div class="moveDiv" id="2">content2content2content2</div>
$(document).ready(function() {
lastMove = 0;
$(".moveDiv").click(function() {
if (lastMove.length > 0) {
$(lastMove).animate({"left": "-=200px", "top": "-=200px"}, "slow");
}
lastMove = $(this);
$(lastMove ).animate({"left": "+=200px", "top": "+=200px"}, "slow");
});
});
基本上我相信你问的是当你点击一个 div 到预设坐标时你如何移动它，然后当你点击另一个 div 时移动移动的 div 并将新的放置到位。
需要注意的是，在 CSS 中，DIV 是默认位置:未设置时是静态的，因此您必须将其声明为绝对的，否则将无法运行。
我已经尝试过你的评论@jsfiddle.net/NWMZJ/3
列表的排列与 div 排列一致，因此当您选择第 2 类时，它会选择要显示的第二个 div。
////////
你能确认你已经把类放在 html 标签上了吗？
<nav><strong> <ul>
<li class="tab"><a href="#" title="News" id="news">NEWS <span class="slash">//</span> </a></li>
<li class="tab"><a href="#" title="Dates" id="dates">LIVE DATES <span class="slash">//</span></a></li>
<li class="tab"><a href="#" title="Media" id="media">MEDIA <span class="slash">//</span></a></li>
<li class="tab"><a href="#" title="Band" id="band">BAND <span class="slash">//</span></a></li>
<li class="tab"><a href="#" title="Community" id="community">COMMUNITY <span class="slash">//</span></a></li>
<li class="tab"><a href="#" title="Merchandise" id="merch">MERCHANDISE <span class="slash">//</span></a></li> </ul></strong> </nav>
<div class="slide" id="tab1"> NEWS</div>
<div class="slide" id="tab2"> DATES</div>
<div class="slide" id="tab3">MEDIA</div>
<div class="slide" id="tab4"> BAND</div>
<div class="slide" id="tab5"> COMMUNITY</div>
<div class="slide" id="tab6"> MERCHANDISE </div>
关于jquery - 单击关闭其他打开的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6356483/