html5에서 탐색 태그를 숨기는 방법-프런트엔드 Q&A-php.cn

html5에서 탐색 태그를 숨기는 방법

WBOY

풀어 주다： 2022-01-23 13:41:19

원래의

3641명이 탐색했습니다.

HTML5에서는 숨겨진 속성을 사용하여 탐색 태그를 숨길 수 있습니다. 이 속성은 지정된 요소를 숨기는 것입니다. 이 속성은 HTML5의 새로운 속성이며 구문은 ""입니다.

html5에서 탐색 태그를 숨기는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, Dell G3 컴퓨터.

html5에서 탐색 레이블을 숨기는 방법

html5에서 탐색 레이블을 숨기려는 경우

hidden 속성은 요소가 숨겨지도록 지정합니다.

숨겨진 요소는 표시되지 않습니다.

이 속성을 사용하면 사용자가 다음과 같은 경우에만 표시할 수 있도록 설정할 수 있습니다. 특정 조건이 충족되면 요소를 확인합니다(예: 확인란 선택). 그런 다음 JavaScript를 사용하여 숨겨진 속성을 제거하고 요소를 표시할 수 있습니다.

예는 다음과 같습니다.

<!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>

로그인 후 복사

탐색 요소에 속성이 추가되지 않았습니다. 출력 결과는 다음과 같습니다.

html5에서 탐색 태그를 숨기는 방법 탐색 모음 요소에 숨겨진 속성을 추가한 후 출력 결과는 다음과 같습니다.