首頁 > 開發者 > JavaScript
標籤：height set change sibling list width idt func style
<!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> <div style="height: 48px"></div> <div style="width: 300px"> <div class="item"> <div id=‘i1‘ class="header" onclick="ChangeMenu(‘i1‘)">菜單一</div> <div class="content"> <div>內容1</div> <div>內容1</div> <div>內容1</div> </div> </div> <div class="item"> <div id = ‘i2‘ class="header" onclick="ChangeMenu(‘i2‘)">菜單二</div> <div class="content"> <div>內容2</div> <div>內容2</div> <div>內容2</div> </div> </div> <div class="item"> <div id = ‘i3‘ class="header" onclick="ChangeMenu(‘i3‘)">菜單三</div> <div class="content"> <div>內容3</div> <div>內容3</div> <div>內容3</div> </div> </div> </div> <!--修改菜單功能--> <script> function ChangeMenu(mid) { var current_header = document.getElementById(mid); //當前頭部 console.log(current_header); var current_base_header = current_header.parentElement.parentElement console.log(current_base_header); var current_list = current_base_header.children; for(var i=0;i<current_list.length;i++){ var current_item = current_list[i]; current_item.children[1].classList.add("hide"); } current_header.nextElementSibling.classList.remove(‘hide‘) } </script></body></html>
javascript 左側菜單
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
