一个简单的网页选项卡

css

 1         ul,li
 2         {
 3             margin:0px;
 4             padding:0px;
 5             list-style-type:none;
 6         }
 7         #menu li
 8         {
 9             text-align:center;
10             float:left;
11             padding:5px;
12             margin-right:2px;
13             width:50px;
14             cursor:pointer;
15         }
16         #menu li.tabFocus
17         {
18             background-color:#f3f2e7;
19             border:solid 1px #666;
20             border-bottom:0;
21             z-index:100;
22             position:relative;
23         }
24         #content
25         {
26             width:260px;
27             height:80px;
28             padding:10px;
29             clear:left;
30             background-color:#f3f2e7;
31             border:solid 1px #666;
32             position:relative;
33             top:-1px;
34         }
35         #content li{display:none;}
36         #content li.conFocus{display:block;}

View Code

    <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>

View Code

测试代码

 1 <ul id="menu">
 2         <li class="tabFocus">家电</li>
 3         <li>厨房</li>
 4         <li>产品</li>
 5     </ul>
 6     <ul id="content">
 7         <li class="conFocus">家电1</li>
 8         <li>厨房2</li>
 9         <li>产品3</li>
10     </ul>

View Code

结果图