jQery簡單Tab選項卡效果

時間 2019-11-22

標籤 jqery 簡單 tab 選項效果简体版

原文原文鏈接

簡單的Tab效果javascript

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。