显示具有活动状态的隐藏div [英] Show hide div with active state
本文介绍了显示具有活动状态的隐藏div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何修改此代码,以便按钮更改为活动状态。它正在使用toggleClass,但之前处于活动状态的按钮仍处于活动状态。
< script type =text / javascript> ;
jQuery(function(){
jQuery('#showall')。click(function(){
jQuery('。targetDiv')。hide();
}) ;
jQuery('。showSingle')。click(function(){
jQuery('。targetDiv')。hide();
jQuery('#div'+ $(this) .toggleClass(greenactive
).attr('target'))。show();
});
});
< / script>
我的按钮代码
< ul class =choose>
< li>< a class =showSingletarget =1>电子邮件订单< / a>< / li>
< li>< a class =showSingletarget =2>订单并立即付款< / a>< / li>
< / ul>
divs
< div id =div1class =targetDivstyle =display:none>
content
< / div>
< div id =div2class =targetDivstyle =display:none>
content
< / div>
style
a.greenactive {background:green}
解决方案
在 addclass()之前使用
removeClass()
$('。showSingle')。click(function(){$('。targetDiv')。hide(); $('。showSingle')。removeClass('greenactive'); $(this ).addClass(greenactive)$('#div'+ $(this).attr('target'))。show();});
< pre class =snippet-code-css lang-css prettyprint-override> a.greenactive {background:green;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 js>< / script>< ul class =choose> <李> < a class =showSingletarget =1>电子邮件订单< / a> < /锂> <李> < a class =showSingletarget =2>订单并立即付款< / a> < / li>< / ul>< div id =div1class =targetDivstyle =display:none> content1< / div>< div id =div2class =targetDiv style =display:none> content2< / div>
How can i amend this code please so that the buttons change on the active. It's getting soemwhere with toggleClass but the button that was formerly active remains active.
<script type="text/javascript">
jQuery(function(){
jQuery('#showall').click(function(){
jQuery('.targetDiv').hide();
});
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).toggleClass( "greenactive"
).attr('target')).show();
});
});
</script>
my button code
<ul class="choose">
<li><a class="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>
the divs
<div id="div1" class="targetDiv" style="display:none">
content
</div>
<div id="div2" class="targetDiv" style="display:none">
content
</div>
style
a.greenactive {background:green}
解决方案
use removeClass()
before addclass()
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('greenactive');
$(this).addClass("greenactive")
$('#div' + $(this).attr('target')).show();
});
a.greenactive {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="choose">
<li>
<a class="showSingle" target="1">Email Order</a>
</li>
<li>
<a class="showSingle" target="2">Order and Pay Now</a>
</li>
</ul>
<div id="div1" class="targetDiv" style="display:none">content1</div>
<div id="div2" class="targetDiv" style="display:none">content2</div>
这篇关于显示具有活动状态的隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文