我有 ID 为“albums”、“about”和“contact”的三个元素,以及通过 toggle() 函数显示/隐藏它们的三个链接,ID 分别为“togglealbums”、“toggleabout”和“togglecontact” . 我只希望能够随时看到这些元素之一,因此我编写了以下函数:
$('#togglealbums').click(function() {
if( $('#about').is(':visible') ) {
$('#about').toggle(function() {
$('#albums').toggle();
});
} else if( $('#contact').is(':visible') ) {
$('#contact').toggle(function() {
$('#albums').toggle();
});
} else {
$('#albums').toggle();
}
});
$('#toggleabout').click(function() {
if( $('#albums').is(':visible') ) {
$('#albums').toggle(function() {
$('#about').toggle();
});
} else if( $('#contact').is(':visible') ) {
$('#contact').toggle(function() {
$('#about').toggle();
});
} else {
$('#about').toggle();
}
});
$('#togglecontact').click(function() {
if( $('#albums').is(':visible') ) {
$('#albums').toggle(function() {
$('#contact').toggle();
});
} else if( $('#about').is(':visible') ) {
$('#about').toggle(function() {
$('#contact').toggle();
});
} else {
$('#contact').toggle();
}
});
首先,如果这些效率极低或者有更简单的方法可以做到这一点,请告诉我。
我发现如果三个 DIV 都不可见,单击其中一个切换链接将显示/隐藏相应的 div,没有动画。但是,如果其中一个 DIV 可见,则单击另一个切换链接将导致 div 缩小和淡入,而新的 div 会展开并淡入,这是我不想要的(至少现在是这样)。这可以在这里看到:http: //new.e17.paca.arvixe.com。
谁能告诉我为什么会这样?
谢谢!
编辑:
标记在这里:
<body>
<div id="main">
<div id="nav">
<div id="menu">
<ul>
<li><a href="#" id="togglealbums">Albums</a></li>
<li><a href="#" id="toggleabout">About Me</a></li>
<li><a href="#" id="togglecontact">Contact</a></li>
</ul>
</div>
</div>
<div id="albums">
Albums go here
</div>
<div id="about">
About info goes here
</div>
<div id="contact">
Contact info goes here
</div>
</div>
</body>