目前，我正在开发一个基本的导航栏，它在单击以转到新页面时更改文本的颜色(因此一页上的文本与另一页上的文本颜色不同)。我开始这个元素最终使用多个 CSS 文件来获得我正在寻找的结果，但它非常低效。显然，“if”语句在 CSS 中不存在，但有一种方法可以在加载特定页面时调用操作。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login"><a href="#">Login</a></li>
<li class="shop"><a href="#">Shop</a></li>
<li class="wname"><a href="index.html">Website Name</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="about"><a href="#">About</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS 代码
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
如果有任何帮助，我将不胜感激， 约旦
最佳答案
更改此规则以添加一个事件类:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
在您的个人页面中，使用 <li> 的类.比方说，在商店页面中，使用以下代码:
<li class="shop active"><a href="#">Shop</a></li>
这是因为，您没有使用任何检查位置和做事的东西。此外，您没有使用任何基于 URL 生成动态 header 的后端应用程序。
关于html - 在导航栏上工作并遇到 CSS 文件集成问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41212301/