javascript - 单击时切换导航按钮

Question

我得到了这个类似 li 的小导航 - 当点击一个时，它应该得到一个 .active 类，而当另一个被点击时，类应该被转移到那个。有什么想法可以通过某种循环来实现吗？

    $(".nav-btn").on('click', function () {
        if($(this).hasClass('active')){
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
        }
    });

ul {
    position: absolute;
    right: 25px;
    top: 35%;
}

li {
    list-style: none;
    font-size: 20px;
    padding: 1px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    color: #1B3067;
    position: relative;
}

span.nav-btn {
    content: "";
    display: inline-block;
    height: 11px;
    width: 11px;
    border: 2px solid red;
    border-radius: 50%;
    float: right;
}

span.nav-btn.active {
    background-color: red;
}

.nav-title {
  text-align: right;
  position: relative;
  top: -25px;
  right: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
    <li id="item1"><span class="nav-btn"></span><p class="nav-title">Item 1</p></li>
    <li id="item2"><span class="nav-btn"></span><p class="nav-title">Item 2</p></li>
    <li id="item3"><span class="nav-btn"></span><p class="nav-title">Item 3</p></li>
</ul>

Answer 1

尝试:

$(".nav-btn").on('click', function () {
    $(".nav-btn").removeClass("active");
    $(this).addClass("active");
});