標籤:python class click ida div ide exp images line
左側菜單
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title> <style> .hide{ display: none; } .menu .head{ height:38px; background-color: #2459a2; line-height: 38px; } </style></head><body><div style="height: 48px ;border: 1px solid red"></div><div style="width:300px ;border: 1px solid red "> <div class="menu"> <div id=‘a1‘ class="head " onclick="caidan(‘a1‘)">菜單1</div> <div class="conent"> <div clas="item">內容1</div> <div clas="item">內容1</div> <div clas="item">內容1</div> </div> </div> <div class="menu"> <div id=‘a2‘ class="head " onclick="caidan(‘a2‘)">菜單2</div> <div class="conent hide"> <div clas="item">內容2</div> <div clas="item">內容2</div> <div clas="item">內容2</div> </div> </div> <div class="menu"> <div id=‘a3‘ class="head" onclick="caidan(‘a3‘)">菜單3</div> <div class="conent hide"> <div clas="item">內容3</div> <div clas="item">內容3</div> <div clas="item">內容3</div> </div> </div> <div class="menu"> <div id=‘a4‘ class="head" onclick="caidan(‘a4‘)">菜單4</div> <div class="conent hide"> <div clas="item">內容4</div> <div clas="item">內容4</div> <div clas="item">內容4</div> </div> </div></div><script> function caidan(nod) { var head=document.getElementById(nod); curr_meu=head.parentElement.parentElement.children; for (var i=0; i<curr_meu.length; i++){ var item_list=curr_meu[i]; item_list.children[1].classList.add(‘hide‘); } head.nextElementSibling.classList.remove(‘hide‘) }</script></body></html>左側菜單
python : HTML+CSS (左側菜單)