Как скрыть подстраницы с помощью jQuery? - PullRequest
Новая
       7

Как скрыть подстраницы с помощью jQuery?

0 голосов
/ 26 сентября 2018

У меня есть страница корзины покупок, которая содержит четыре подстраницы (Корзина, Контактная информация, Способ доставки, Способ оплаты), которая выглядит следующим образом:

enter image description here

Пользователь может перемещаться по аналогии с обычной навигацией, поэтому я хочу, чтобы эта навигация была скрыта в корзине покупок в целом и отображалась только тогда, когда пользователь переходит к следующему этапу процесса корзины.

Примечание.использование хэша для навигации по этому навигационному элементу

Вот HTML-код nav: 

<div class="box-steps">
    <ul class="nav nav-tabs bs-wizard" style="border-bottom:0;" data-tabs="tabs">
        <li class="bs-wizard-step active">
            <a href="#box-order-one" id="step-one" data-toggle="tab">{l s='Koszyk' mod='threepagecheckout'}</a>
               <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">
        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-two" data-toggle="tab">{l s='Dane kontaktowe' mod='threepagecheckout'}</a>
            <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">

        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-three" data-toggle="tab">{l s='Dostawa' mod='threepagecheckout'}</a>
            <img src="http://localhost:8080/modules/threepagecheckout/views/css/../../views/img/right-arrow.png">

        </li>
        <li class="bs-wizard-step">
            <a href="#box-order-four" data-toggle="tab">{l s='Sposób płatności' mod='threepagecheckout'}</a>

        </li>
        <li class="stretch"></li>
    </ul><!-- end Box header right -->
</div>
<!-- end Box Header steps -->

Вот JS, который у меня есть: 

function hideNavbar() {
    if (window.location.hash == "#box-order-one") {
        $('.bs-wizard').hide();
    } else {
        $('.bs-wizard').show();
    }

}
function linkBackToBoxOne() {
    $('#step-one').click(function () {
        window.location.hash = "#box-order-one";
        $('.bs-wizard').hide();
    });
}

Для справки: перейти кОсновная корзина покупок. Я использую эту ссылку 

http://localhost:8080/index.php?controller=order-opc

, которая отображает ордера и навигацию в целом. Я хочу, чтобы навигация скрывалась сразу при посещении этой страницы.

Мой метод скрывает навигацию только тогда, когда яперейдите по этой ссылке 

http://localhost:8080/index.php?controller=order-opc#box-order-one
http://localhost:8080/index.php?controller=order-opc#box-order-two
http://localhost:8080/index.php?controller=order-opc#box-order-three
http://localhost:8080/index.php?controller=order-opc#box-order-four

Погуглил почти 3 часа, ничего не помогло, пожалуйста, мне нужна ваша помощь: (

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

как-то так?! 

function hideNavbar() {
//start hiding all steps
$('.bs-wizard-step').hide();

if (window.location.hash == "#box-order-one") {
    $( "#box-order-one" )
        .prevUntil( "li" )
            $('.bs-wizard-step').show();
}

}

https://api.jquery.com/nextUntil/

конечно: id = "" должно быть в тегах

...но это так
0 голосов
/ 26 сентября 2018

Если вы хотите, чтобы навигация была скрыта в URL-адресе http://localhost:8080/index.php?controller=order-opc, вам необходимо добавить проверку в своем Javascript для этого URL-адреса.Поскольку на этой странице нет хэша, вам нужно использовать что-то отличное от window.location.hash.

Например, вы можете использовать window.location.pathname, который дает вам все после домена - в этом случае это будетбыть index.php?controller=order-opc

function hideNavbar() {
    if (window.location.hash === "#box-order-one" || window.location.pathname ==="index.php?controller=order-opc") {
        $('.bs-wizard').hide();
    } else {
        $('.bs-wizard').show();
    }
}
...