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

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>

这篇文章是关于 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