CODEWITHSUNDEEP
htmlzurb-foundation-5
general03
general03

Reputation: 863

Default select button in foundation group button

When my page is loading, I want to select an item automatically on my button group but I can't find the Foundation class to use.

<div class="button-bar">
        <ul class="button-group">
              <li><a href="#" class="small button">date</a></li>
              <li><a href="#" class="small button">site</a></li>
        </ul> 
</div>

This post speaks about Zurb-Foundation 4 ! Do you known if something has changed in Zurb-Foundation 5 ?

Thanks

Upvotes: 0

Views: 546

Answers (2)

general03
general03

Reputation: 863

The solution is to use an :focus tag in CSS

.button-group li a:focus {
    background-color: red;
}

And the Javascript code to focus on the link

$('.button-group li a').get(0).focus()

Thanks to @Bass Jobsen

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49054

I think $('.button-group li a').get(0).focus() should work (unless you add the focus to an other element afterwards). You also will loose the focus by clicking somewhere else.

You can create your own active class for the buttons:

SCSS:

.button.active {
@extend button:hover;
}

CSS:

.button.active {
background-color: #007095;
}

Now you can use:

<li><a href="#" class="small button active">site</a></li>

Or with JavaScript:

 $('.button-group li:nth-child(2) a').addClass('active');

Upvotes: 1

Related Questions