链接jQuery之间切换

时间:2011-07-11 21:01:36

标签: jquery html animation

JS:

    <script type="text/javascript">
    <script type="text/javascript">
function slideUpAll(id){
 if(id != "about")
   $('#about').slideUp();
 if(id != "team")
   $('#team').slideUp();
 if(id != "contact")
   $('#contact').slideUp();
 if(id != "job")
   $('#job').slideUp();
}
function sd_about(){$('#about').slideDown("slow");}
function sd_team(){$('#team').slideDown("slow");}
function sd_contact(){$('#contact').slideDown("slow");}
function sd_job(){$('#job').slideDown("slow");}
$(function(){
  $("#about").delegate("anchorOrDivOrImg", "mousedown", function(e){

     slideUpAll(e.target.id);
  });
});
</script>

HTML:

        <div id="nav"> 
            <ul>
            <li><a href="#" onclick="sd_about()">About</a></li>
            <li><a href="#" onclick="sd_team()">Team</a></li>
            <li><a href="#" onclick="sd_contact()">Contact</a></li>
            <li><a href="#" onclick="sd_job()">Jobs</a></li>
            </ul>
        </div>
<div id="about">
        <div id="about_left">
            about
        </div><!--about_left--> 
        <div id="about_right">
            <img src="img/book.png" width="256" height="161" alt="LogicPad eBooks" />
        </div>

        <div id="clear"> </div>
</div><!--about-->
<div id="team">
<h1>team</h1>
</div>
<div id="contact">
<h1>contAct</h1>
</div>
<div id="job">
<h1>job</h1>
</div>

我要完成的任务:如果您点击一个链接,然后点击另一个链接,则第一个链接会缩回,最后点击的链接会展开。

现在正在做什么:如果您点击一个链接,然后点击另一个链接,它基本上只是将两组内容放在另一个链接之下。

有人可以帮助我吗?我究竟做错了什么?请在回答中显示一些源代码。

3 个答案:

答案 0 :(得分:1)

试试这个

<script type="text/javascript">
function slideUpAll(id){
 if(id != "about")
   $('#about').slideUp();
 if(id != "team")
   $('#team').slideUp();
 if(id != "contact")
   $('#contact').slideUp();
 if(id != "job")
   $('#job').slideUp();
}
function sd_about(){$('#about').slideDown("slow");}
function sd_team(){$('#team').slideDown("slow");}
function sd_contact(){$('#contact').slideDown("slow");}
function sd_job(){$('#job').slideDown("slow");}
$(function(){
  $("#about").delegate("anchorOrDivOrImg", "mousedown", function(e){

     slideUpAll(e.target.id);
  });
});
</script>

答案 1 :(得分:0)

首先为所有父导航提供一个类,例如nav

然后在每次slideToggle之前,执行$(".nav").slideUp("slow")

答案 2 :(得分:0)

如果没有看到您的链接,也许您可​​以从这个jsfiddle示例中受益:drop down menus

我想也许你需要包含一个点击功能。现在,我所能看到的是你已经创建了函数但没有调用。您必须从onclick中的链接调用该函数,或者在jquery中调用此函数:

$('a').click(function(){ 
//code here 
});