选项卡

选项卡：

//html
    <div id="box">
        <ul>
            <li class="one">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>   
        <div id="content">
             <div class="mian" style="display:block">内容一</div>
             <div class="mian">内容二</div>
             <div class="mian">内容三</div>
        </div>
    </div>

        #box {
            padding: 100px;
            font-size: 14px;
        }
        #box ul {
            list-style-type: none;
            height: 30px;
            line-height: 30px;
        }
        #box ul li {
            float: left;
            border: 1px solid #999;
            padding: 0 10px;
            margin-right: 10px;
            border-bottom: none;
            cursor: pointer;
        }
        #content {
            border: 1px solid #999;
            width: 325px;
            height: auto;
            padding: 10px;
        }
        
        #content .mian {
            display: none;
        }
        #box ul li.two {
            background: orange;  /*设定选中时背景颜色 */
        }   /* li选中时的背景颜色，先后不一样效果有微小差别*/
        #box ul li.one {
            background: #fff;/*  第一个默认背景 色 */
        }

//js
        var oDiv = document.getElementById("box");
        var aLi = document.getElementsByTagName("li");
        var aDiv = document.getElementsByClassName("mian");

        var i = 0;

        for (i = 0; i < aLi.length; i++) {

            aLi[i].index = i;
            aLi[i].onclick = function() {

                for (i = 0; i < aLi.length; i++) { //循环未选中的元素的样式
                    aLi[i].className = "";
                    aDiv[i].style.display = "none";
                }
                this.className = "one";
                aDiv[this.index].style.display = "block";
            };
        }

jquery实现的效果:

    $(function() {

        var aLi = $("#box ul li");
            // gt(N) 选择器，选中大于n所有元素
        $(".mian:gt(0)").hide();
        aLi.click(function() {

            $(this).addClass("one").siblings().removeClass();

            //获取选择元素的下标
            var aDiv = $(this).index();

            //:eq()和.eq()他们都是选择指定元素，:eq()选择器选中的元素，.eq()调用元素时用
            $(".mian").eq(aDiv).show().siblings().hide();

        });

        aLi.hover(function() {
            $(this).addClass("two").siblings().removeClass("two"); //removeClass()删除two，选中的li样式不受干扰
        });

    });