如果我理解正确,我认为您追求的是这样的:
$('a.link').on('click', function(e) {
e.preventDefault();
var slideSelector = '#' + $(this).attr('id').replace('link', 'slide');
// slide down the div which corresponds to the clicked anchor,
$(slideSelector).slideDown(500, function() {
// slide the rest up
$('div.slide').not($(slideSelector)).slideUp(500);
});
// or do it in the reverse order
$('div.slide').not($(slideSelector)).slideUp(500, function() {
$(slideSelector).slideDown(500);
});
});
这是我用于上述示例的标记:-
<a id="link1" class="link" href="#">Link 1</a>
<a id="link2" class="link" href="#">Link 2</a>
<a id="link3" class="link" href="#">Link 3</a>
<div class="slide" id="slide1">Slide Example #1</div>
<div class="slide" id="slide2">Slide Example #2</div>
<div class="slide" id="slide3">Slide Example #3</div>
请注意,<a>
's 和<div>
's 都被赋予了id
's,它们用于将两者联系在一起(看看slideSelector
)。
这是一个小提琴,每次单击链接时都会在上述每个示例之间切换
这只是一种方法,例如另一种方法是将链接和 div 包装在单独的容器中,然后使用index()
来选择与单击的链接相对应的 div,但是链接和 div 必须以相同的顺序出现以使其正常工作。