隐藏/显示不同的链接
我有一个脚本在jsfiddle的一个链接上工作。
我有两个链接。 链接一个是“链接一个”另一个是“链接二”你可以在jsfiddle上看到代码= http://jsfiddle.net/lamberta/7qGEJ/4/
它可以显示和隐藏，但我不能让它显示一个和另一个。 它显示了一切。
如果我按Link一个我想显示“.open-container-One”如果我按Link 2我只想显示“open-container-Two”
希望你理解我的问题。
jsCode：
$(document).ready(function() { var $div = $('.test'); var height = $div.height(); $div.hide().css({ height: 0 }); $('a').click(function() { if ($div.is(':visible')) { $div.animate({ height: 0 }, { duration: 500, complete: function() { $div.hide(); } }); } else { $div.show().animate({ height: height }, { duration: 500 }); } return false; }); }); 虽然我喜欢@ adeneo的答案，但我更喜欢使用选择器而不是元素的方法：
$(".test").hide(); $('.list a').each(function(i) { $(this).on("click", function() { $(".test").slideUp(0).eq(i).slideDown(400, function() { $(".close a").on("click", function() { $(".test").slideUp(); }); // on click close }); // after slideDown (shown div) }); // on click link }); // each
唯一的条件是应该有相同数量的链接（列表项）作为要显示的div的数量和相同的顺序。
请参阅JSFIDDLE
从单击的锚点获取索引，在这种情况下必须是包装li ，然后使用该索引在.test元素集合中选择正确的索引。 无需重新创建已构建到jQuery中的slideUp / Down。
$(function() { var elems = $('.test').hide(); $('a').click(function(e) { e.preventDefault(); var selEl = elems.eq($(this).closest('li').index()); selEl.slideToggle(600); elems.not(selEl).slideUp(600); }); });
小提琴
将类赋给锚标记，
Link 01 Link 02
将相应的类作为id作为div标记
... ... ... ...
在javascript函数中进行以下更改
$('a').click(function() { $('div.test').hide(); var showDivClass = $(this).attr("class"); $("#" + showDivClass).show().animate({ height: height }, { duration: 500 }); $('div.test').not("#" + showDivClass).hide().animate({ height: 0 }, { duration: 500 }); });
更新和测试。
请提供锚标记的ID，该标记与您需要显示/隐藏的类相同。 并用id标签替换$ div