Question

如何修改此代码，以便按钮更改为活动状态。它使用toggleClass进行soem，但之前处于活动状态的按钮仍处于活动状态。

<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="showSingle" target="1">Email Order</a></li>
<li><a class="showSingle" target="2">Order and Pay Now</a></li>
</ul>

divs

<div id="div1" class="targetDiv" style="display:none">
content
</div>

<div id="div2" class="targetDiv" style="display:none">
content
</div>

式

a.greenactive {background:green}

Answer 1

您需要在所有removeClass()元素上调用.showSingle，然后才能在引发事件的类上切换类：

$('.showSingle').removeClass('greenactive');

Working example

Answer 2

在removeClass()

之前使用addclass()

＆＃13;

$('.showSingle').click(function () {
    $('.targetDiv').hide();
    $('.showSingle').removeClass('greenactive');
    $(this).addClass("greenactive")
    $('#div' + $(this).attr('target')).show();
});

＆＃13;

a.greenactive {
    background: green;
}

＆＃13;

<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>

＆＃13;

显示具有活动状态的隐藏div

2 个答案: