基础组按钮中的默认 select 按钮

Question

当我的页面正在加载时，我想 select 在我的按钮组上自动添加一个项目，但我找不到要使用的 Foundation class。

<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 谈论 Zurb-Foundation 4！您知道 Zurb-Foundation 5 中是否发生了某些变化吗？

谢谢

Answer 1

我认为 $('.button-group li a').get(0).focus() 应该可行（除非您之后将焦点添加到其他元素）。您还可以通过单击其他地方来失去焦点。

您可以为按钮创建自己的 active class：

SCSS:

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

CSS:

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

现在您可以使用：

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

或 JavaScript:

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

Answer 2

解决方案是在 CSS

中使用 :focus 标签

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

和Javascript代码重点放在link

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

感谢@Bass Jobsen

基础组按钮中的默认 select 按钮

Default select button in foundation group button

html

zurb-foundation-5