Html 在css中保持活动状态

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

是否有一种方法，当我加载页面时，第一个按钮处于活动状态，而当我单击另一个按钮时，它变为活动状态，而前一个按钮不再活动

我的HTML：

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

---

您可以使用Javascript或Jquery来实现这一点。这是给你的样品

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

CSS

---

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

您可以像@Sachin指出的那样使用JavaScript，或者在纯CSS中使用

：target

伪类

您应该做的唯一一件事是在锚定标记中添加一个超链接引用（

href

），我认为这将使您的标记更具语义

HTML

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

---

既然你在回答你的问题时/我认为CSS解决方案会很好。

只需将你希望首先显示为活动的类重命名为

class=“login button active”

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

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

您还可以添加一些

id=”“

，以简化更改。然后你可以使用：

---

var-element=document.getElementById（“yourID”）
第一个保持蓝色，它不改变第一个的意思是什么？活动类的颜色为白色。所以活动链接将是白色的。
<a href="#login" id="login" class="login-button">login</a>

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

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