由于某種原因,目前無法在我的代碼中添加一個活動類。
這是我的代碼:
ul {
list-style-type: none; /* removes the bullet points, as navigation bars don't need bullet points */
margin: 0; /* removes the margin from the nav bar */
padding: 0; /* removes the padding from the nav bar */
overflow: hidden;
background-color:#2D2D6F; /* controls main nav bar colour */
position: sticky; /* makes the nav bar sticky */
}
li {
display: inline; /* makes the text go all across the page, rather than down */
float: left; /* similar to line above */
border-right:1px solid #7070A6; /* controls border between link colour */
}
li a {
display: block;
color: white; /* controls nav bar text colour */
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #14144F; /* Changes the colour of the shade when the object is shaded */
color:white; /* Changes colour of text when mouse hovers on said nav bar link */
} /* When mouse is hovered on a nav bar object, the code in this function occurs */
.active {
background-color: #04AA6D;
}
我正在嘗試添加一個活動類,以便用戶能夠看到他們在哪個頁面上,但是它并沒有真正起作用。
歡迎所有幫助。
編輯:這是HTML:
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #4A4A8A;"
</body>
<body>
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="Motherboard.html">Motherboard</a></li>
<li><a href="wacom_tablet.html">Wacom Drawing Tablet</a></li>
<li><a href="assistive_technologies.html">Assistive Technologies</a></li>
<li><a href="bibliography.html">Bibliography</a></li>
</ul>
<br><br><br><br><br><br>
Homepage
</body>
</html>
uj5u.com熱心網友回復:
第 1 步:洗掉過時的標簽
第 2 步:在需要的地方添加活動類。
這應該可以作業,現在對于每個頁面,您必須將活動類添加到“ul”“li”標簽中的不同“a”標簽。
這有幫助嗎?
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color: #4A4A8A;">
<ul>
<li><a class="active" href="index.html">Homepage</a></li>
<li><a href="Motherboard.html">Motherboard</a></li>
<li><a href="wacom_tablet.html">Wacom Drawing Tablet</a></li>
<li><a href="assistive_technologies.html">Assistive Technologies</a></li>
<li><a href="bibliography.html">Bibliography</a></li>
</ul>
<br><br><br><br><br><br>
Homepage
</body>
</html>
uj5u.com熱心網友回復:
請也添加您的 HTML,這樣我們可以看到您如何附加以及 .active 類的位置。
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/490406.html
上一篇:如何將文本集中在按鈕內
