Question

我有一个购物车页面，其中包含四个子页面（购物袋，联系方式，运输方式，付款方式），如下所示：

用户可以像普通导航一样导航，因此我希望将此导航导航通常隐藏在购物车中，并且仅在用户进入购物车流程的下一步时显示。

注意：我正在使用哈希导航此导航

这是导航html：

<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

Googled将近3个小时都无法正常工作，请您帮忙：（

Answer 1

如果要将导航隐藏在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();
    }
}

Answer 2

是这样吗？！

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 =“”应该放在

标记中...但这就是方法

如何使用jQuery隐藏子页面？

2 个答案: