单击时关闭其他打开的div-Java 学习之路

我在父母的溢出中隐藏了几个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，索引问题？

2 回答

嗯，

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

回复于 2024-05-04T06:45:25+08:00

我会给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/

回复于 2024-05-04T06:45:25+08:00

单击时关闭其他打开的div

2 回答

相关问题