一个简单的网页选项卡

css

        ul,li
        {
            margin:0px;
            padding:0px;
            list-style-type:none;
        }
        #menu li
        {
            text-align:center;
            float:left;
            padding:5px;
            margin-right:2px;
            width:50px;
            cursor:pointer;
        }
        #menu li.tabFocus
        {
            background-color:#f3f2e7;
            border:solid 1px #666;
            border-bottom:0;
            z-index:100;
            position:relative;
        }
        #content
        {
            width:260px;
            height:80px;
            padding:10px;
            clear:left;
            background-color:#f3f2e7;
            border:solid 1px #666;
            position:relative;
            top:-1px;
        }
        #content li{display:none;}
        #content li.conFocus{display:block;}

js

    <script type="text/javascript">
        jQuery(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>

测试代码

<ul id="menu">
        <li class="tabFocus">家电</li>
        <li>厨房</li>
        <li>产品</li>
    </ul>
    <ul id="content">
        <li class="conFocus">家电1</li>
        <li>厨房2</li>
        <li>产品3</li>
    </ul>

 

结果图