我想做的是在不同的 div 之间切换。这有点难以解释,但我会试一试。
当页面加载时,会有一个可见的 div 和 4 的 display:none。并且会有一个菜单。链接 1 将显示第一个 div 并隐藏所有其他 div。然后,当单击链接 2 时,可见的 div 将隐藏,而 div2 将显示。单击链接 3 时,可见的 div 将隐藏,而 div3 将显示,依此类推。基本上一次只显示一个 div。
我写了这个,但它只在有 2 个 div 时才有效。
$(function () {
$('#link').click(function () {
$('#div1, #div2').toggle();
});
});
但这只会显示隐藏的 div 并隐藏显示的那个。
好的,我做到了,发现它可以更容易地完成。这就是我所做的。它不是很优雅,但它确实有效。
$(document).ready(function () {
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function () {
$('.slidingDiv').slideToggle();
$('.slidingDiv2').hide('slow');
$('.slidingDiv3').hide('slow');
$('.slidingDiv4').hide('slow');
$('.slidingDiv5').hide('slow');
});
});
$(document).ready(function () {
$('.slidingDiv2').hide();
$('.show_hide2').show();
$('.show_hide2').click(function () {
$('.slidingDiv2').slideToggle();
$('.slidingDiv').hide('slow');
$('.slidingDiv3').hide('slow');
$('.slidingDiv4').hide('slow');
$('.slidingDiv5').hide('slow');
});
});
$(document).ready(function () {
$('.slidingDiv3').hide();
$('.show_hide3').show();
$('.show_hide3').click(function () {
$('.slidingDiv3').slideToggle();
$('.slidingDiv').hide('slow');
$('.slidingDiv2').hide('slow');
$('.slidingDiv4').hide('slow');
$('.slidingDiv5').hide('slow');
});
});
$(document).ready(function () {
$('.slidingDiv4').hide();
$('.show_hide4').show();
$('.show_hide4').click(function () {
$('.slidingDiv4').slideToggle();
$('.slidingDiv').hide('slow');
$('.slidingDiv2').hide('slow');
$('.slidingDiv3').hide('slow');
$('.slidingDiv5').hide('slow');
});
});
$(document).ready(function(){
$('.slidingDiv5').hide();
$('.show_hide5').show();
$('.show_hide5').click(function () {
$('.slidingDiv5').slideToggle();
$('.slidingDiv').hide('slow');
$('.slidingDiv2').hide('slow');
$('.slidingDiv3').hide('slow');
$('.slidingDiv4').hide('slow');
});
});
和<a href="#" class="show_hide"><span class="nav">link</span></a>