如何在水平导航上居中活动菜单

【问题标题】：How to center active menu on horizontal navigation如何在水平导航上居中活动菜单
【发布时间】：2017-02-06 08:57:32
【问题描述】：

我的计划是在单页网站上创建一个循环水平菜单，但我无法做到。有没有办法将活动菜单集中在水平导航上？说明请参考附图。

图 1 将是导航的外观，当用户单击数字 2 时，数字 2 将变为活动状态，并且位置将位于菜单的中心。

请指教。

【问题讨论】：

您不需要建议。你想让我们做你的工作......你尝试过什么吗？
我试了几次都不行。这就是为什么没有给出代码的原因。
另外，我还在学习 jQuery，还没有像你们一样掌握它。这就是我在这里需要帮助的原因。
如果您可以向我们展示您尝试过的东西，我们会鼓励您提供帮助...
即使只是 HTML，你也应该给我们一些工作，教你如何做你需要的。使用 JSFiddle 之类的服务。

标签： jquery css menu

【解决方案1】：

HTML

<ul>
        <li>menu 01</li>
        <li>menu 02</li>
        <li class="active">menu 03</li>
        <li>menu 04</li>
        <li>menu 05</li>
    </ul>

CSS

    body{
    text-align: center;
}*{
    margin: 0;
    padding: 0;
}
ul{
    margin-top: 50px;
}
li{
    display: inline-block;
    width: 120px;
    list-style: none;
}
li.active{
    color: red;
}

JQUERY

$(document).ready(function () {
    var nextActiveElement;
    var currentActiveElement = $("li.active").text();
    $("li").click(function (){
        nextActiveElement = $(this).text();
        $(this).text(currentActiveElement);
        currentActiveElement = nextActiveElement;
        $("li.active").text(nextActiveElement);
    });
});

【讨论】：

别忘了包含 jquery
是的，经过测试！ jsfiddle，选中项目后可以滑动吗？像 lavalamp 菜单一样，它会在悬停时突出显示。但是为此，当用户单击时，菜单会像滑块一样根据位置滑动。
可以像菜单滑块一样吗？
我希望有可能，但这需要时间。