tap切换延迟

最新推荐文章于 2021-08-04 18:11:32 发布

弹琴弹琴

最新推荐文章于 2021-08-04 18:11:32 发布

阅读量1k

点赞数

分类专栏： HTML5+CSS3点滴知识

本文链接：https://blog.csdn.net/bbsyi/article/details/51824218

版权

HTML5+CSS3点滴知识专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
    .box li{
        width: 50px;
        height: 30px;
        line-height: 30px;
        float: left;
        background: #eee;
        list-style: none;
        cursor: pointer;
    }
    .box .item{
        border-bottom: 1px solid #e5e5e5;
        -webkit-transition: border-bottom 0.5s linear 0s;
        transition: border-bottom 0.5s linear 0s;
    }
    .box .item.active{
        border-bottom: 1px solid red;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li class="item">tab1</li>
            <li class="item">tab2</li>
        </ul>
    </div>
<script>
    $('.item').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
    })
</script>
</body>
</html>

弹琴弹琴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tap切换延迟

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-1.8.3.min.js"&
复制链接

扫一扫