HTML 選項卡切換

效果圖：

       

 

 

 首先是html的布局：

  <ul id="menu">
                        <li class="tabFocus">任嘉倫</li>
                        <li>王俊凱</li>
                        <li>李現</li>
                    </ul>
                    <ul id="content">
                        <li class="conFocus">任嘉倫（原名任國超），1989年4月11日出生於山東省青島市。</li>
                        <li>王俊凱，1999年9月21日出生於重慶市,TFBOYS隊長。</li>
                        <li>李現，曾用名李晛，1991年10月19日出生於湖北省咸寧市</li>
                    </ul>

然后是對樣式的處理：

 <style>
        body {
            font-size: 12px;
        }

        ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
        }

        #menu li {
            text-align: center;
            float: left;
            padding: 5px;
            width: 64px;
        }

            #menu li.tabFocus {
                background-color: royalblue;
                border-bottom: 0;
                z-index: 100;
                position: relative;
            }

        #content {
            width: 300px;
            height: 100px;
            padding: 10px;
            background-color: bisque;
            border: 1px solid red;
            position: relative;
            top: 26px;
        }

            #content li {
                display: none;
            }

                #conent li.conFocus {
                    display: block;
                }
    </style>

最后通過js控制

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
        $(function () {
            $("#menu li").each(function (index) {//帶參數遍歷各個選項卡
                $(this).click(function () {//注冊每個選項卡的點擊事件
                    $("#menu li.tabFocus").removeClass("tabFocus")//移除已選中的樣式
                    $(this).addClass("tabFocus");//增加當前選項卡的樣式
                    //顯示選項卡對應的內容，隱藏被選中的內容
                    $("#content li:eq(" + index + ")").show().siblings().hide();
                })
            })
        })
    </script>

最后就大功告成拉！