python學習之網站的編寫（HTML，CSS，JS）（十六）----------示例，構造一個左側管理選單的功能，點選主選單才顯示下面的內容
阿新 • • 發佈：2018-11-12
結果：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> <style> .hide{ display: none; } .item .header{ height: 35px; background-color: #ff0000; color: #ffffff; line-height: 35px; } </style> </head> <body> <div style="width: 300px"> <div class="item"> <div id="i1" class="header" onclick="show('i1');">選單1</div> <div class="content hide"> <div>內容1</div> <div>內容1</div> <div>內容1</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="show('i2');">選單2</div> <div class="content hide"> <div>內容2</div> <div>內容2</div> <div>內容2</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="show('i3');">選單3</div> <div class="content hide"> <div>內容3</div> <div>內容3</div> <div>內容3</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="show('i4');">選單4</div> <div class="content hide"> <div>內容4</div> <div>內容4</div> <div>內容4</div> </div> </div> </div> <script> alert('歡迎來到逆水行舟不進則退的主頁'); // 思路：先讓所有的都不顯現，再讓指定輸入的內容顯現 // 通過id找到選單，然後往上返兩層再往下返一層就可以得到所有的item條目 // 然後讓所有的都加上display:none讓所有都不顯示 // 最後讓指定的內容顯示 function show(id) { var current_header=document.getElementById(id); 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>