单击时关闭其他打开的 div

发布于 2024-11-15 13:08:21 字数 2148 浏览 1 评论 0原文

我有几个 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，索引问题？

原文

I've got several divs hidden in the overflow of a parent and have them animating up into view on click of the corresponding nav menu item, but I want each div to return to its original position once another one is opened. Each div and nav item has a separate corresponding id.

Code is below.

I know there's plenty of similar issues on here already, but am fairly 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

Have given all the nav links a class of tab and the divs a class of slide.

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

The first tab is now opening for every nav item as opposed to each corresponding div, index problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风吹短裙飘 2024-11-22 13:08:21

嗯，

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

Hmm,

Do you mean something like this:
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 what I belive you are asking is how you move a div when you click it to a preset co-ordinate, and then when you click another div move the moved one back and place the new one in place.

Something to be aware off is that in CSS, a DIV is default possition: Static when it is not set, thus you must declare it as absolute or it will not function.

I have attempted your comment @ jsfiddle.net/NWMZJ/3

The list's arrangement links in unison with the div arrangement, so that when you select class 2, it selects the second div to show.

////////

Can you confirm you have put the class's onto the html tags?

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

回复收藏 0 原文

_失温 2024-11-22 13:08:21

我会给 div 一个类“选项卡”。然后你可以写：

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

i'd give the divs a class 'tab'. Then you could write:

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

~没有更多了~