Question

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

<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课程：

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

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

感谢@Bass Jobsen

基础组按钮中的默认选择按钮

2 个答案: