標簽菜單欄，點擊一個菜單，顯示菜單小標題，另外2個菜單不現實小標題內容
阿新 • • 發佈：2018-06-20
meta ecc width ID 功能 font spl mar 顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 1000px; width: 100%; } .menu{ float: left; background-color: beige; width:30%; height: 500px; } .content{ float: left; background-color: rebeccapurple; width: 70%; height: 500px; } .title{ background-color: aquamarine; line-height: 40px; } .hide{ display: none;/*隱藏*/ } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="show(this)">菜單一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title"onclick="show(this)">菜單二</div> <div class="con hide"><!--隱藏起來，一個類名2個名字功能不同--><div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title"onclick="show(this)">菜單三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery-3.3.1.min.js"></script> <script> function show(hello) {//jquery對象取的方法,不加引號-----$(hello) $(hello).next().removeClass("hide");//移除hide名字，顯示 $(hello).parent().siblings().children(".con").addClass("hide");//加上hide名字重新隱藏item //拿到菜單一二三標簽，找到父標簽item,找到sibilings標簽即另外2個item標簽， // 對另2個item標簽children標簽找到icon標簽，加上類名hide } </script> </body> </html>
標簽菜單欄，點擊一個菜單，顯示菜單小標題，另外2個菜單不現實小標題內容