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

我的计划是在一个单页网站上创建一个循环水平菜单，但我无法做到这一点。有没有办法将活动菜单置于水平导航的中心？请参考所附图片进行解释

图1将是导航的外观，当用户单击数字2时，数字2将激活，位置将位于菜单的中心

请告知。

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>

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，还没有像你们一样掌握它。这就是我需要帮助的原因。如果你能向我们展示一些你已经尝试过的东西，我们会鼓励你提供帮助……即使只是HTML，你也应该给我们一些东西来做，教你如何做你需要的事情。使用像JSFIDLE这样的服务。别忘了包括jqueryyes，tested，当项目被选中时，它可以滑动吗？和lavalamp菜单一样，悬停时它将高亮显示。但是对于这一点，当用户单击时，菜单会像滑块一样根据位置滑动。它能像菜单滑块一样吗？我希望这是可能的，但这需要时间。

$(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);
    });
});