jQery简单Tab选项卡效果

时间:2022-03-16 19:28:53

简单的Tab效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            #box{
                margin: 50px auto;
                width: 600px;
                height: 500px;
            }
            ul li{
                width: 200px;
                height: 50px;
                float: left;
                list-style: none;
            }
            #box div{
                width: 600px;
                height: 450px;
                display: none;
            }
            .li1{
                background: blue;
            }
            .li2{
                background: gold;
            }
            .li3{
                background: pink;
            }
            .div1{
                background: blue;
            }
            .div2{
                background: gold;
            }
            .div3{
                background: pink;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //加载后让第一个div先显示出来
                $('#box div').eq(0).css('display','block')
                $('#box ul li').mouseover(function(){
                    //将当前移上li的下标对应的div显示,同时将不是ul的同级元素(div)隐藏
                    $('#box div').eq($(this).index()).css('display','block').siblings().not('ul').css('display','none')
                })
            })
        </script>
    </head>
    <body>
        <div id="box">
            <ul>
                <li class="li1"></li>
                <li class="li2"></li>
                <li class="li3"></li>
            </ul>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
        </div>
        
    </body>
</html>