我想使用一些按钮来显示/隐藏使用
jquery的多个div.
该页面将初始显示所有div.那个想法是,将有一个按钮重置(显示全部),然后单独的按钮显示一个特定的div,而隐藏其余的.
任何帮助将不胜感激.
<div class="buttons"> <a class="button" id="showall">All</a> <a class="button" id="showdiv1">Div 1</a> <a class="button" id="showdiv2">Div 2</a> <a class="button" id="showdiv3">Div 3</a> <a class="button" id="showdiv4">Div 4</a> </div> <div id="div1">Lorum Ipsum</div> <div id="div2">Lorum Ipsum</div> <div id="div3">Lorum Ipsum</div> <div id="div4">Lorum Ipsum</div>
解决方法
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" 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">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
