<a> 如何在点击后保留颜色

我有3个<a>标签链接到3个页面。我将hover的状态设置为red，现在我想在我点击并转到某个页面后，将保持background-color的<a>类似于hover的状态。我该怎么做？

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html" class = "active">Home</a>
<a href="team.html">Teams</a>
<a href="history.html">History</a>
</nav>
</header>
<main>
//some  code here
</main>
</body>
</html>

和CSS:

header > nav > a{
background-color:while;
}
header > nav > a:hover{
background-color: rgb(255, 204, 164);
}

我的意思是，在我点击Teams后，会改变团队的背景颜色，比如悬停状态

您使用的技术有点不清楚，但从表面上看，您要做的是有三个独立的页面(index.html，teams.html，history.html(

其中的每一个都将共享您在这里拥有的样板，但更改哪个链接具有"活动类"。

例如。

index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html" class = "active">Home</a>
<a href="team.html">Teams</a>
<a href="history.html">History</a>
</nav>
</header>
<main>
//some  code here
</main>
</body>
</html>

teams.html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Teams</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html" >Home</a>
<a href="team.html" class = "active">Teams</a>
<a href="history.html">History</a>
</nav>
</header>
<main>
//some  code here
</main>
</body>
</html>

history.html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - History</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ulimate Frisbee</h1>
<nav>
<a href="index.html">Home</a>
<a href="team.html">Teams</a>
<a href="history.html"  class = "active">History</a>
</nav>
</header>
<main>
//some  code here
</main>
</body>
</html>

然后使用.active类进行这种样式设置。

例如

a:hover, a.active {
background-color: red; 
}

现在，像这样的复制粘贴代码可能是不可持续的，所以这就是你可能开始使用pug这样的模板工程，或者进行某种后端渲染或其他什么的地方。

但这是最糟糕的。

相关内容

最新更新

热门标签：