이 글에서는 왼쪽 메뉴 효과를 구체적으로 구현하기 위한 JavaScript를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
왼쪽 메뉴 효과 표시를 구현하기 위한 js의 구체적인 코드를 공유합니다. . , 참고로 구체적인 내용은 다음과 같습니다
현재 학습한 코드의 양이 좀 많아서 앞으로 학습하면 더 간단해집니다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .item .header { height: 35px; background-color: #2459a2; color: white; line-height: 35px; } </style> </head> <body> <p style="height: 48px"></p> <p style="width: 300px"> <p class="item"> <p id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</p> <p class="content hide"> <p>内容1</p> <p>内容1</p> <p>内容1</p> </p> </p> <p class="item"> <p id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</p> <p class="content hide"> <p>内容2</p> <p>内容2</p> <p>内容2</p> </p> </p> <p class="item"> <p id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</p> <p class="content hide"> <p>内容3</p> <p>内容3</p> <p>内容3</p> </p> </p> <p class="item"> <p id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</p> <p class="content hide"> <p>内容4</p> <p>内容4</p> <p>内容4</p> </p> </p> </p> <script> function ChangeMenu(nid) { var current_header = document.getElementById(nid); var item_list = current_header.parentElement.parentElement.children; for (var i = 0; i < item_list.length; i++) { var current_item = item_list[i]; current_item.children[1].classList.add('hide'); } current_header.nextElementSibling.classList.remove('hide'); } </script> </body> </html>
효과는 다음과 같습니다.
아무 메뉴나 클릭한 후,
위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
드래그 추가에 대한 자세한 소개 Bootstrap Pull 기능에서 Modal로 드롭합니다
위 내용은 JavaScript를 사용하여 왼쪽 메뉴 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!