单击时切换导航按钮

Question

我得到了一个像导航一样的小李 - 当点击一个时它应该得到一个.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");
});

Answer 2

为什么不直接定位列表项并切换兄弟姐妹？

＆＃13;

＆＃13;

$("#mainNavigation li").on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在点击其他active时删除.nav-btn课程。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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></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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需删除所有元素上的类，然后将其添加到新元素中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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></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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

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