在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;
}

Answer 1

您可以使用JavaScript作为@Sachin指出，或者在纯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解决方案会很好。

Answer 2

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

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

CSS

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

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

Answer 3

首先将您想要显示为活动的类重命名为class="login-button active"

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

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

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

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