1. 程式人生 > >標簽菜單欄,點擊一個菜單,顯示菜單小標題,另外2個菜單不現實小標題內容

標簽菜單欄,點擊一個菜單,顯示菜單小標題,另外2個菜單不現實小標題內容

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個菜單不現實小標題內容