CSS 및 JavaScript로 마우스를 가져갈 때 탭을 변경하려면 코드는 다음과 같습니다. -
예시
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; display: none; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>Demo Heading Tabs</h2> <p>Get the Department info by hovering over tabs:</p> <div class="tab"> <button class="tablinks" onmouseover="demo(event, 'Marketing')">Marketing</button> <button class="tablinks" onmouseover="demo(event, 'Operations')">Operations</button> <button class="tablinks" onmouseover="demo(event, 'Finance')">Finance</button> <button class="tablinks" onmouseover="demo(event, 'IT')">IT</button> </div> <div id="Marketing" class="tabcontent"> <h3>Marketing</h3> </div> <div id="Operations" class="tabcontent"> <h3>Operations</h3> </div> <div id="Finance" class="tabcontent"> <h3>Finance</h3> </div> <div id="IT" class="tabcontent"> <h3>IT</h3> </div> <div class="clearfix"></div> <script> function demo(e, dept) { var i, content, links; content = document.getElementsByClassName("tabcontent"); for (i = 0; i < content.length; i++) { content[i].style.display = "none"; } links = document.getElementsByClassName("tablinks"); for (i = 0; i < links.length; i++) { links[i].className = links[i].className.replace(" active", ""); } document.getElementById(dept).style.display = "block"; e.currentTarget.className += " active"; } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
아무 탭이나 가리킵니다 -