1.效果

2.程式碼

2.0 關鍵功能

onmouseover="change('girl')" 函式的功能是滑鼠放上時觸發執行，change()方法中的引數‘girl’和
後面的id=‘gril’進行了繫結，所以當滑鼠放上時，根據引數顯示響應的區域。 

css樣式中：display: flex;為flexbox佈局，預設水平方向佈局。

2.1 HTML

<div id="box">
    <div id="project">
        <ul id="title">
            <li onmouseover="change('girl'
 
)"><a href="#">女裝</a></li>
            <li onmouseover="change('boy')"><a href="#">男裝</a></li>
            <li onmouseover="change('child')"><a href="#">童裝</a></li>
        </ul>
        <ul id="content">
            <li class=
 
"girl" id="girl">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服飾的變遷是一部歷史，是一個時代發展的縮影。它是這個時代進步、文明、興旺發達、繁榮昌盛的象徵。
                它在記錄歷史變革的同時，也映襯著一種民族的文化，傳承著當地的歷史文化風俗，女裝更是其中不可缺少的一部分。
                女士穿著的衣物統稱為女裝。女裝品牌與款式的多元化推動了時裝的發展。</p></li>
            <
 
li class="boy" id="boy">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;男裝是指男性穿於人體起保護和裝飾作用的服飾製品。包括上裝和下裝，男裝會根據季節和個人的不同有不同的款式和作用。</p></li>
            <li class="child" id="child">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;兒童服裝簡稱童裝，指適合兒童穿著的服裝。按照年齡段分包括嬰兒服裝、幼兒服裝、小童服裝、中童服裝、大童服裝等。還包括中小學的校園服裝等。按照衣服的型別分為：連體服，外套，褲子，衛衣，套裝，T恤衫，鞋等。</p></li>
        </ul>
    </div>
</div>

2.2 CSS

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #222222;
    }
    #box #project{
        width: 800px;
        margin: 20px auto;
        display: flex;
        border: 1px solid #ff6666;
    }
    #box #project #title{
        list-style: none;
        text-align: center;
        margin: 5px 5px auto;
    }
    #box #project #title li{
        width: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        background-color: #FF8C00;
        padding: 6px;
        border:1px solid #cccccc;
        border-radius: 6px;
    }
    #box #project #title li:hover{
        background-color: #ff6666;
    }
    #box #project a{
        color: #000000;
        text-decoration: none;
    }
    #box #project #content{
        list-style: none;
        font-size: 14px;
        margin: 10px;
    }
    .girl{
        display: block;
    }
    .boy{
        display: none;
    }
    .child{
        display:none;
    }

2.3 Javascript

<script>
   function change(name) {
       if (name =='girl'){
           girl.style.display = 'block'
boy.style.display = 'none'
child.style.display = 'none'
}else if(name == 'boy'){
           girl.style.display = 'none'
boy.style.display = 'block'
child.style.display = 'none'
}else if(name == 'child'){
           girl.style.display = 'none'
boy.style.display = 'none'
child.style.display = 'block'
}
   }
</script>