html - 在 CSS 中保持活动状态

Question

我正在创建一个登录表单，并且正在 JavaScript 中隐藏/显示状态。

有没有办法在我加载页面时，第一个按钮处于活动状态，而当我单击另一个按钮时，它变为活动状态而前一个按钮不再活动？

我的 HTML：

<a class="login-button" >login</a><a class="login-button">register</a><a class="login-button">cant login?</a>

我的 CSS：

.login-button
{color:#00BFFF;
padding-right:20px;
}
.login-button:active
{ color:#FFF;
font-family:customfont-bold;
}

score 2 · Accepted Answer

正如@Sachin 指出的那样，您可以只使用 JavaScript，或者使用伪类在纯 CSS中进行。:target

您唯一应该做的就是将超链接引用 ( href) 添加到您的锚标记，我认为这会使您的标记更加语义化。

HTML

<a href="#login" id="login" class="login-button">login</a>

CSS

#login:target {
  color:#FFF;
  font-family:customfont-bold;
}

由于您将问题与css / html一样标记，因此我认为 CSS 解决方案会很好。

score 1 · Accepted Answer

您可以使用 Javascript 或 Jquery 来实现此目的。这是给你的样本

$("a").click(function() {
    $("a").removeClass("active");
    $(this).addClass("active");
});

CSS

.active
{ 
  color:#FFF;
  font-weight:bold;
}

当然，您可以更具体地使用选择器。

score 0 · Accepted Answer

只需将您希望首先显示为活动的类重命名为class="login-button active"

然后插入一个 javascript 函数以从一个更改为另一个，例如：

function{ 
      var element = document.getElementsByClassName("login-button active");
      element.className="login-button";
}

您还可以添加一些id=""以使更改更容易。然后你可以使用：

var element = document.getElementById("yourID");

3 回答 3