Geek asks and answers

Close other open divs when clicked

I have several divs hidden when the parent element overflows and animate their animations when I click on the corresponding element of the navigation menu, but I want each div to return to its original position after opening the other. Each div and nav element has a separate corresponding identifier.

The code is below.

I know there are already a lot of similar problems here, but I'm pretty new to jQuery, so any help would be great.

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; }
    });
});
});

* Sorry, html follows

<!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>

Edit

Give all the navigation links a tab class and divs a slide class.

$(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"); 
});
});

Does the first tab now open for each navigation item, and not for every corresponding problem with the div index?

+3
source share
2 answers

Hmm

- : 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, .

-, , , CSS DIV : Static, , .

@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>
+1

divs . :

$("#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/

0
source

More articles:


All Articles