teb选项卡效果制作实列

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
        <style>
        body,ul,li{
            margin: 0;padding: 0;
        }
        .bodyDiv{
            width: 100%;
            height: 100%;
            background-color: #9cf;
        }
        .titleHead{
            width: 100%;
            height: 60px;
            background-color: #cf9;
        }
        .titleHead>ul{
            width: 50%;
            height: 60px;
        }
        .titleHead>ul>li{
            display: inline;
            float: left;
            width: 20%;height: 40px;line-height: 40px;text-align: center;
            margin-top: 20px;
            cursor: pointer;
        }
        /*内容区*/
        .contentDiv{
            width: 100%;
            height: 600px;
            background-color: #fc9;
        }
        .contentDiv>div{
            width: 100%;
            height: 600px;
            background-color: #ffffff;
        }
        .contentDiv>div:not(.defaultDiv){
            display: none;
        }
    </style></head>
<body>
   <div>
       <!--/标题/-->
       <nav>
           <ul id="titleClick">
               <li>01</li>
               <li>02</li>
               <li>03</li>
               <li>04</li>
               <li>05</li>
           </ul>
       </nav>
       <!--/content内容区域/-->
       <div id="contentDiv">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
       </div>
   </div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
    $("#titleClick").find("li").on("click",function(){
        $(this).css({backgroundColor:"white"});
        $("#titleClick").find("li").not($(this)).css({backgroundColor:"#f4f4f4"});
        $('#contentDiv').find("div").removeClass("defaultDiv");
        $("#contentDiv").find("div").eq($(this).index()).addClass("defaultDiv");
    })
</script>
</html>

你可能感兴趣的:(teb选项卡效果制作实列)