jQery简单Tab选项卡效果

Posted Q_zhangsan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQery简单Tab选项卡效果相关的知识，希望对你有一定的参考价值。

简单的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>

 

以上是关于jQery简单Tab选项卡效果的主要内容，如果未能解决你的问题，请参考以下文章

jquery简单实现tab选项卡效果

jquery简单实现tab选项卡效果--转

选项卡执行android中下一个片段中存在的代码

使用片段在选项卡中启动活动

Android：使用Tab检测单个片段viewpager

显示 ActionBar 选项卡的两个片段