jquery手风琴

最新推荐文章于 2022-05-29 19:32:58 发布

菲允龙歌

最新推荐文章于 2022-05-29 19:32:58 发布

阅读量196

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100715203

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

jquery实现tab切换

$(function () {
    $('.nav li').each(function (x) {
        $(this).addClass('active').siblings().removeClass();
        $('.content div').eq(x).show().siblings().hide()
    })
})

jquery手风琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {padding: 0;margin: 0;}
        .box {width: 900px;height: 300px;}
        .box1,.box2,.box3,.box4 {float: left;position: relative;}
        .a,.b,.c,.d {position: absolute;top: 0;left: 0;width: 100px;height: 300px;}
        .bg {background-color: #000;opacity: 0.3;}
p {width: 20px;height: 300px;display: inline-block;color: #fff;position: absolute;top: 0;left: 15px;opacity: 1;}
.two {left: 53px;}
        img {width: 100px;height: 300px;}
        .show {width: 600px;}
    </style>
    <script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="a w bg">
                <p>作者：默默的墨墨</p>
                <p class="two">我的个人拉萨之旅故事之城</p>
            </div>
            <img src="images/u=1081344387,1785290410&fm=26&gp=0.jpg" alt="" class="show">
        </div>
        <div class="box2">
            <div class="b w">
                    <p>作者：默默的墨墨</p>
                    <p class="two">我的个人拉萨之旅故事之城</p>
            </div>
            <img src="images/u=1348707900,559674524&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="box3">
            <div class="c w">
                    <p>作者：默默的墨墨</p>
                    <p class="two">我的个人拉萨之旅故事之城</p>
            </div>
            <img src="images/u=1407589226,1345601442&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="box4">
            <div class="d w">
                    <p>作者：默默的墨墨</p>
                    <p class="two">我的个人拉萨之旅故事之城</p>
            </div>
            <img src="images/u=1686059205,404217172&fm=26&gp=0.jpg" alt="">
        </div>
    </div>
    <script>
        $(function(){
            $('.w').each(function(x){
                $(this).click(function(){
                    
                    $('.box').find('img').each(function(){
                        $(this).removeClass()
                    })
                    $(this).parent().parent().find('img').eq(x).toggleClass('show')

                    $('.box').find('.w').each(function(){
                        $(this).removeClass('bg')
                    })
                    $(this).toggleClass('bg')

                })
            })
        })
    </script>
</body>
</html>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery手风琴

jquery实现tab切换$(function () { $('.nav li').each(function (x) { $(this).addClass('active').siblings().removeClass(); $('.content div').eq(x).show().siblings().hide() })}) jqu...
复制链接

扫一扫