0

почему не удаляет предедущий активный класс при нажатии буттона

$('.nav-item button').click(function () {
    $(this).parent().children('span').removeClass('active-line');
    $(this).parent().children('span').addClass('active-line');


});
.active-line{
    width: 50px;
    height: 3px;
    background-color: #E18848;
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <i class="fas fa-calendar-alt week-calendare"></i>

                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">ԵՐՔ
                        </button>
                        <span  class="week-orange-line active-line"></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">ՉՐՔ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՀՆԳ
                        </button>
                        <span  class="week-orange-line "></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab1" data-bs-toggle="pill" data-bs-target="#pills-contact1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՈՒՐԲ
                        </button>
                        <span  class="week-orange-line "></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab2" data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՇԲԹ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab3" data-bs-toggle="pill" data-bs-target="#pills-contact3" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ԿԻՐ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>

                </ul>

1 ответ 1

1

Вы удаляете класс у того спана, на котором и добавляете. Нужно убирать класс у всех спанов (либо ограничить список классом week-orange-line )

$('.nav-item button').click(function () {
    $('span').removeClass('active-line'); // $('span.week-orange-line').removeClass('active-line');
    $(this).parent().children('span').addClass('active-line');
});
.active-line{
    width: 50px;
    height: 3px;
    background-color: #E18848;
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <i class="fas fa-calendar-alt week-calendare"></i>

                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">ԵՐՔ
                        </button>
                        <span  class="week-orange-line active-line"></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">ՉՐՔ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՀՆԳ
                        </button>
                        <span  class="week-orange-line "></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab1" data-bs-toggle="pill" data-bs-target="#pills-contact1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՈՒՐԲ
                        </button>
                        <span  class="week-orange-line "></span>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab2" data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՇԲԹ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>

                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pills-contact-tab3" data-bs-toggle="pill" data-bs-target="#pills-contact3" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ԿԻՐ
                        </button>
                        <span  class="week-orange-line"></span>
                    </li>

                </ul>

1
  • огромное спасибо
    – Agata
    5 мая 2021 в 8:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.