Question

我在父母的溢出中隐藏了几个div，让他们在点击相应的导航菜单项时动画到视图，但是我希望每个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，索引问题？

Answer 1

嗯，

你的意思是这样的： 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"); 
    });
});

Bassicaly我相信你要问的是当你点击一个div到预设的坐标时你是如何移动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>

Answer 2

我会给div一个类'tab'。然后你可以写：

$("#tab1").animate({ bottom: sipPos }, 600, 'linear', function() {
   if(sipPos == 0) { sipPos = -800;}
   else { sipPos = 0; }
});

$(".tab:not(#tab1)").animate({ bottom: 0}); //.....

http://api.jquery.com/not-selector/

单击时关闭其他打开的div

2 个答案: