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>

最后就大功告成拉！