tab页切换效果实现

最新推荐文章于 2022-10-18 12:34:34 发布

飞扬_柳絮

最新推荐文章于 2022-10-18 12:34:34 发布

阅读量439

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/tjcjava/article/details/78134282

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <title>tab页切换效果</title>
        <style>
            *{padding: 0;margin: 0;}
            html,body{width:100%;height:100%;}
            #wrap{
                margin: 50px 10px 10px;
                border:1px solid #00ff00;
            }
            .tab{
                width:100%;
                height: 50px;
                list-style: none;
                border-bottom: 1px solid red;
            }
            .tab li{
                width: 33.33%;
                text-align: center;
                line-height: 50px;
                float:left;
            }
            .active{color:red; background-color:yellow;}
            .content{box-sizing:border-box; padding:10px;}
            .con{
                display: none;
            }
            .show{display:block;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <ul class="tab">
                <li class="active">化妆品</li>
                <li>电子产品</li>
                <li>进口零食</li>
            </ul>
            <div class="content">
                <div class="con show">化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品</div>
                <div class="con">电子产品电子产品电子产品电子产品电子产品电子产品电子产品电子产品电子产品电子产品电子产品电子产品</div>
                <div class="con">进口零食进口零食进口零食进口零食进口零食进口零食进口零食进口零食进口零食进口零食进口零食进口零食</div>
            </div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(function(){
               $('.tab li').click(function(){
                   var index = $(this).index();
                   $(this).addClass('active').siblings().removeClass('active');
                   $('.con').eq(index).addClass('show').siblings().removeClass('show');
               }); 
            });
        </script>
    </body>
</html>

飞扬_柳絮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab页切换效果实现

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale
复制链接

扫一扫