javascript - 用于向边框添加左线的 SCSS 不起作用

Question

我正在尝试让一个按钮在未选中状态下看起来就像一个普通的未修饰链接。

当用户点击它时，我想应用一个名为“active”的类。

在激活状态下，我想让按钮的左边框变成蓝色。

这是我的 scss，但它不起作用:

.case-nav-link {
  display: block;
  min-width: 200px;
  font-size:16px;
  border:1px solid gray;
  margin:10px;
  padding:15px 10px;
  border-left:solid 6px transparent;
  &.active {
    border-left:solid 6px blue;
  }
}

Answer 1

你不应该使用 <a>为此，如果您希望在单击时添加类，请使用 <button type="button">或 <span>如果您在页面加载时添加它，您的代码就可以工作。检查这个fiddle

<a href="#0" class="case-nav-link active">something</a>

.case-nav-link {
  display: block;
  min-width: 200px;
  font-size: 16px;
  border: 1px solid gray;
  margin: 10px;
  padding: 15px 10px;
  border-left: 6px solid transparent;
    box-sizing: border-box;
  &.active {
    border-left: 6px solid red;
  }
}