jQuery显示并隐藏具有选定类的多个div
我需要能够显示和隐藏基于哪个href类是'选定'的div我有一些代码如下：
http://jsfiddle.net/XwN2L/722/
我需要删除上面的小提琴中的'全部'选项。
所以基本上，当一个href有选择的类时，会显示href的两个链接，然后当用户点击另一个href时，它会隐藏以前的链接，并显示新的链接，
当他们点击链接时，所选的班级会发生变化，并且按钮会相应地隐藏和显示？
几乎只需要最后一点的帮助。
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle selected" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">
<a href="#" class="button3">1a</a>
<a href="#" class="button3">1b</a>
</div>
<div id="div2" class="targetDiv">
<a href="#" class="button3">2a</a>
<a href="#" class="button3">2b</a>
</div>
<div id="div3" class="targetDiv">
<a href="#" class="button3">3a</a>
<a href="#" class="button3">3b</a>
</div>
<div id="div4" class="targetDiv">popup COMPLETE</div>
<script>
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
<script>
干杯
你可以使用data-*属性：
<div class="buttons">
<a id="showall" data-target="all" >All</a>
<a class="showSingle" data-target="1">Div 1</a>
<a class="showSingle selected" data-target="2">Div 2</a>
<a class="showSingle" data-target="3">Div 3</a>
<a class="showSingle" data-target="4">Div 4</a>
</div>
var $target = $('.targetDiv'); // caching object for better performance
$('.buttons a').click(function(e) {
e.preventDefault();
$(this).addClass('selected').siblings().removeClass('selected');
var target = $(this).data('target');
if (target === 'all') {
$target.show();
} else {
$target.hide().filter('#div' + target).show();
}
});
http://jsfiddle.net/fKHsB/
链接地址: http://www.djcxy.com/p/65497.html上一篇: jQuery Show and Hide multiple divs with a selected class