jq实现一个简易的选项卡

浅浅的花香味﹌ 2023-05-31 12:21 12阅读 0赞

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

<!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>