jquery做TAB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">
        body,div,ul{ padding:0; margin:0;}
        #container{width:800px; margin:50px;}
        .tab{ padding:0; margin:0;  }
        .tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
        .content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
        .content div{ border-top:0px; height:60px;}
        .tab_selected{ border-left:solid 1px black; border-right:solid 1px black; border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
        .tab_current{  text-decoration:underline;}
       </style>
       <script language="javascript" type="text/javascript">
           $(
            function() {
                $(".content div:gt(0)").hide();
                $(".tab li").css("cursor", "pointer");
                $(".tab li").hover(function() {
                    $(this).addClass("tab_current");
                }, function() {
                    $(this).removeClass("tab_current");
                }).click(
                    function() {
                        $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
                        $(".content div").eq($(this).index()).siblings().hide().end().show();
                    }
                )
            }
           );
       </script>
<body>
 
<div id="container">
       <div class="tab">
            <ul>
                <li class="tab_selected">选项卡A</li>
                <li>选项卡B</li>
                <li>选项卡C</li>
                <li>选项卡C</li>
            </ul>
       </div>
       <div class="content">
            <div>内容一</div>
            <div>内容二</div>
            <div>内容三</div>
            <div>内容888</div>
       </div>
    </div>
</body>
</html>
posted @ 2014-10-28 13:40  fm060  阅读(225)  评论(0)    收藏  举报