Question

我在我的应用程序中使用swiper min js来显示菜单。

我可以显示菜单。

我的问题是，是否可以移动菜单中的选定/点击项目将其移至中心？

这是我显示菜单的代码

var T1categories = ["ONE", "TWO", "THREE" , "FOUR" , "FIVE" ];
createhorizontaltab(T1categories);

function createhorizontaltab(categories) {
    var categoryArr = categories;
    var favoriteresultag = '';
    for (var i = 0; i < categoryArr.length; i++) {
        favoriteresultag += '<div class="swiper-slide"><span>' + categoryArr[i] + '</span></div>';
    }
    $("#swipecontainer").append(favoriteresultag).trigger("create");
}
$(document).on("click", ".swiper-slide", function() {
    $('.swiper-slide').removeClass('swiper-slide-active');
    $(this).addClass('swiper-slide-active');
});

请让我知道如何做到这一点。

Answer 1

首先，我确定了菜单的中心，在创建这些元素的同时给出了一个id center 。然后我使用跨度更改单击跨度的文本，其id为 center 。

    var T1categories = ["ONE", "TWO", "THREE" , "FOUR" , "FIVE" ];
    createhorizontaltab(T1categories);

    function createhorizontaltab(categories) {
        var categoryArr = categories;
        var favoriteresultag = '';
        for (var i = 0; i < categoryArr.length; i++) {
            if(i!=2) {/* I assumed you always have five spans for the menu*/
                favoriteresultag += '<div class="swiper-slide"><span>' + categoryArr[i] + '</span></div>';
            }
            else {
                favoriteresultag += '<div class="swiper-slide" id="center"><span>' + categoryArr[i] + '</span></div>';
            }
        }
        $("#swipecontainer").append(favoriteresultag).trigger("create");
    }
    $(document).on("click", ".swiper-slide", function() {
        var str = $(this).text();
        var str2 = $("#center").text();
        $(this).removeClass('swiper-slide-active');
        $(this).children().text(str2);
        $("#center").children().text(str);
        $("#center").addClass('swiper-slide-active');
    });

这种方法可以给你一个想法。

如何将菜单中的所选项目移动到中心

1 个答案: