JavaScript를 사용하여 왼쪽 메뉴 효과를 얻는 방법
- 亚连원래의
- 2018-06-20 17:11:132449검색
이 글에서는 왼쪽 메뉴 효과를 구체적으로 구현하기 위한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue를 사용하여 토큰 확인을 구현하는 방법다음 기사：Vue를 사용하여 토큰 확인을 구현하는 방법