jQery简单Tab选项卡效果

最新推荐文章于 2024-08-27 15:59:21 发布

aijieyin8659

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Q-zhangsan/p/6127973.html

版权

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

转载于:https://www.cnblogs.com/Q-zhangsan/p/6127973.html

aijieyin8659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQery简单Tab选项卡效果

简单的Tab效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{...
复制链接

扫一扫