显示具有活动状态的隐藏div [英] Show hide div with active state

问题描述

如何修改此代码，以便按钮更改为活动状态。它正在使用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屋！