how to make active button in foundation zurb

问题

I have tried the following code to create an active button in F5, but its NOT giving active class effect, please let me know why?

    <ul class="button-group radius small">
      <li class="active"><a href="#" class="button small alert">Button 1</a></li>
      <li><a href="#" class="button small alert">Button 2</a></li>
      <li><a href="#" class="button small alert">Button 3</a></li>
      <li><a href="#" class="button small alert">Button 4</a></li>
    </ul>

回答1:

Zurb foundation does not have any active classes for button groups. You can see here http://foundation.zurb.com/docs/components/button_groups.html

If you want add an active class create one class add to your active buttons,

    .activebutton{

    background-color: #970b0e;

    }

回答2:

Elaborating on @chinmayahd's answer, for the convenience of anyone looking:

button.active, .button.active { background-color: /*primary active color*/ }
button.secondary.active, .button.secondary.active { background-color: /*secondary active color*/ }
button.success.active, .button.success.active { background-color: /*success active color*/ }
button.alert.active, .button.alert.active { background-color: /*alert active color*/ }
button.warning.active, .button.warning.active { background-color: /*warning active color*/ }
button.info.active, .button.info.active { background-color: /*info active color*/ }

Add your respective active colors, and you're good to go! (I recommend grabbing the hover/focus colors from your foundation.css file.)

来源：https://stackoverflow.com/questions/20177111/how-to-make-active-button-in-foundation-zurb