Dostałem tę małą nawigację podobną do LI's - gdy jeden jest klikany, powinien uzyskać klasę .active, a gdy drugi zostanie kliknięty, klasa powinna zostać przeniesiona do tego. Jakieś pomysły, jak mogłem osiągnąć to za pośrednictwem jakiejś pętli ..?

    $(".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>
0
Smithy 5 czerwiec 2018, 13:35

5 odpowiedzi

Najlepsza odpowiedź

Próbować :

$(".nav-btn").on('click', function () {
    $(".nav-btn").removeClass("active");
    $(this).addClass("active");
});
4
SG52 5 czerwiec 2018, 10:40
$(".nav-btn").on('click', function () {
    $( ".nav-btn" ).each(function( index ) {
      $(this).removeClass("active");
    });
$(this).addClass("active");
});
0
Simos Fasouliotis 5 czerwiec 2018, 10:39

Dlaczego nie tylko skierować do elementów listy i przełączają rodzeństwo?

$("#mainNavigation li").on('click', function() {
  $(this).addClass('active').siblings().removeClass('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;
}

.active span.nav-btn {
  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>
2
DreamTeK 5 czerwiec 2018, 10:42

Usuń active klasa, gdy kliknięto inne {X1}}.

$(".nav-btn").on('click', function () {
        if(!$(this).hasClass('active')){
            $(".nav-btn").removeClass("active");
            $(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></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>
1
Kiran Shahi 5 czerwiec 2018, 10:44

Po prostu usuń klasę na wszystkich elementach i dodaj go do nowego.

$(".nav-btn").on('click', function() {
    $(".nav-btn").removeClass("active");
    $(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></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>
0
eisbehr 5 czerwiec 2018, 10:37