jq实现一个简易的选项卡

最新推荐文章于 2020-08-14 10:37:20 发布

dyx19971026

最新推荐文章于 2020-08-14 10:37:20 发布

阅读量156

点赞数

分类专栏： JQ 文章标签： jq实现一个简易的选项卡

本文链接：https://blog.csdn.net/dyx19971026/article/details/102736021

版权

JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客分享了一种用jq快速实现简易选项卡的实践过程，虽然不是最优解，但适合初学者练手。作者欢迎读者提出改进意见。

摘要由CSDN通过智能技术生成

以下写的方法不是最优质的的方法，就是为了练练手，希望大家不要介意，如有问题，还请多指教

<!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>
        li {
            list-style-type: none;
        }

        a {
            text-decoration-line: none;
        }

        .parent {
            position: relative;
            width: 359px;
            float: left;
            background-color: #cfa;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }

        .lunre li {
            float: left;
            width: 52px;
            font-size: 14px;
            text-align: center;
            line-height: 45px;
            height: 45px;
        }

        .lunre a {
            font-size: 16px;
        }

        .lunre .re {
            border-bottom: 3px solid #DDB75F;
        }

        .lunre li.re a {
            color: #DDB75F;
        }

        .biao a {
            display: block;
            text-align: center;
            color: #DDB75F;
            font-size: 20px;
            height: 20px;
            margin-bottom: 10px;
        }

        .did {
            position: absolute;
            top: 23px;
            right: 46px;
        }

        .bottom {
            position: relative;
            height: 275px;
            width: 320px;
            overflow: hidden;
        }

        .bottom .tab {
            height: 275px;
            width: 320px;
            position: absolute;
            top: 10px;
        }

        .nongqing {
            text-align: center;
            overflow: hidden;
        }

        .nongqing li {
            padding: 5px 0px 5px 0px;
            width: 210px;
            white-space: nowrap;
            color: #fff;
        }

        .nongqing li a {
            padding-right: 44px;
            font-size: 18px;
            color: #b8b9c5 !important;
        }

        .nongqing li span {
            font-size: 12px;
            color: black;

        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="lunre">
            <ul>
                <li class="re acti"><a href="">热门</a></li>

                <li><a href="">新闻</a></li>

                <li><a href="">公告</a></li>

                <li><a href="">活动</a></li>

                <li><a href="">赛事</a></li>
            </ul>
            <a class="did" href="">...</a>
        </div>
        <div class="bottom">
            <div class="tab">
                <p class="biao"><a href="">9月3日全服不停机更新公告</a></p>
                <ul class="nongqing">
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                </ul>
            </div>
            <div class="tab">
                <p class="biao"><a href="">9月4日全服不停机更新公告</a></p>
                <ul class="nongqing">
                    <li><a href="">浓情轮播，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>

                </ul>
            </div>
            <div class="tab">
                <p class="biao"><a href="">9月5日全服不停机更新公告</a></p>
                <ul class="nongqing">
                    <li><a href="">浓情十月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>

                </ul>
            </div>
            <div class="tab">
                <p class="biao"><a href="">9月6日全服不停机更新公告</a></p>
                <ul class="nongqing">
                    <li><a href="">爱情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>

                </ul>
            </div>
            <div class="tab">
                <p class="biao"><a href="">9月7日全服不停机更新公告</a></p>
                <ul class="nongqing">
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>
                    <li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li>

                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>

        $('.lunre li').hover(
            function () {
                $(this).addClass('re').siblings().removeClass('re');
            }
        )
        $(function () {
            //初始的时候 当前处于活动状态的元素索引
            
            
            var current = $('.lunre li').index();
            
            $('.tab').each(function (x, y) {
                //x代表索引值 y代表操作的Dom对象
                //初始化时 是将所有的tab块 都移动各自的距离  呈一行排开
                $(y).css('left', x * 320 + 'px');
            });
            $('.lunre li').mouseover(function () {
                //触发事件后， 当前处于活动状态的元素
                var i = $(this).index();
                if (i != current) {
                    //将当前处于活动状态的元素变更一下
                    current = i;
                    //可以通过他们的定位值进行改变
                    $('.tab').each(function (x, y) {
                        //此时的x是最终移动到哪个li上，从而判断所有的dom对象都移动相同距离
                        //stop(true，true)表示清空当前动画队列，立即停止并完成当前动画。
                        //第一个参数 是否清空当前动画队列
                        //第二个参数是是否完成当前动画
                        //y 代表的是所有的dom对象，每一个都执行了left
                        var left = x * 320 - current * 320;
                        $(y).stop(true, true).animate({
                            left: left + 'px'
                        }, 500);
                    })
                }
            })
        });

    </script>
</body>

</html>