Heim >Web-Frontend >Front-End-Fragen und Antworten >So verbergen Sie das Navigations-Tag in HTML5
So verbergen Sie das Navigations-Tag in HTML5
- WBOYOriginal
- 2022-01-23 13:41:193674Durchsuche
In HTML5 können Sie das Attribut „hidden“ verwenden, um das Navigations-Tag auszublenden. Die Funktion dieses Attributs besteht darin, das angegebene Element auszublenden. Dieses Attribut ist ein neues Attribut in HTML5 und die Syntax lautet „
Versteckte Elemente werden nicht angezeigt." , Sie können das versteckte Attribut verwenden.
Wenn dieses Attribut verwendet wird, kann das versteckte Attribut so eingestellt werden, dass Benutzer es nur anzeigen können Wenn bestimmte Bedingungen erfüllt sind (z. B. das Aktivieren eines Kontrollkästchens usw.), können Sie das ausgeblendete Attribut entfernen und das Element wie folgt sichtbar machen: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{margin:0;padding: 0;}
ul{
list-style-type: none;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li hidden><a href="#home">首页</a></li>
<li hidden><a href="#news">新闻动态</a></li>
<li hidden><a href="#contact">联系我们</a></li>
<li hidden><a href="#about">关于我们</a></li>
</ul>
<div style="background-color:pink;height:1500px;"></div>
</body>
</html>Wenn das Das ausgeblendete Attribut wird nicht zum Navigationselement hinzugefügt. Das Ausgabeergebnis lautet wie folgt:
HTML-Video-Tutorial
"Das obige ist der detaillierte Inhalt vonSo verbergen Sie das Navigations-Tag in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!