Home > Article > Web Front-end > How to hide the navigation tag in html5
In HTML5, you can use the hidden attribute to hide the navigation tag. The function of this attribute is to hide the specified element. This attribute is a new attribute in HTML5, and the syntax is "
". ".
The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.
If you want to hide navigation tags in HTML5, you can use the hidden attribute.
The hidden attribute specifies that the element is hidden.
Hidden elements will not be Display.
If you use this attribute, the element will be hidden.
The hidden attribute can be set so that the user can only see an element when certain conditions are met (such as selecting a check box, etc.). You can then use JavaScript to remove the hidden attribute, making the element visible.
Examples are as follows:
<!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>Output results when the hidden attribute is not added to the navigation element As follows;
After adding the hidden attribute to the navigation bar element, the output result is as follows:
Recommended tutorial: "html video tutorial》
The above is the detailed content of How to hide the navigation tag in html5. For more information, please follow other related articles on the PHP Chinese website!