如何将活动菜单置于水平导航中心

Question

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

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

请告知。

Answer 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);
    });
});