tab标签页的实现，简易版

代码很简单，就是先设置好自己的tab标签页的样式，然后用js控制显示和隐藏，当然最开始就要把第一个面板显示，其余面板隐藏，因为只有点击鼠标的时候才会触发事件；循环把所有面板隐藏，当点击一个标签页，就把对应的内容设置为显示，即可实现

<style>            

            ul li{
                list-style: none;
                float:left;
                border:1px solid gray;
                width:100px;
                text-align: center;
                height:50px;
                line-height:50px;                
            }
            ul li:hover{
                color:blue;
                cursor: pointer;
            }

   </style>

<script>
            function changeTab(tabCon_num){
            for(i=0;i<=2;i++) {
                 document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏
             }
                 document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层
            }

        </script>

<div>
            <ul>
                <li οnclick="changeTab('0')">孟美岐</li>
                <li οnclick="changeTab('1')">吴宣仪</li>
                <li οnclick="changeTab('2')">exy</li>
            </ul>
        </div>
        <div style="width:305px;height:200px;border:2px solid black;margin-left:40px;margin-top:50px;text-align: center;">
            <div id="tabCon_0">
                孟美岐孟美岐孟美岐孟美岐孟美岐
            </div>
            <div style="display: none;" id="tabCon_1">
                吴宣仪吴宣仪吴宣仪吴宣仪吴宣仪
            </div>
            <div style="display: none;" id="tabCon_2">
                exyexyexyexyexy
            </div>

        </div>