How to hide the navigation tag in html5-Front-end Q&A-php.cn

How to hide the navigation tag in html5

WBOY

Release： 2022-01-23 13:41:19

Original

3640 people have browsed it

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 "

How to hide the navigation tag in html5

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

Navigation of html5 How to hide tags

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>

Copy after login

Output results when the hidden attribute is not added to the navigation element As follows;

How to hide the navigation tag in html5

After adding the hidden attribute to the navigation bar element, the output result is as follows:

How to hide the navigation tag in html5

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!