如何使用 jQuery 隐藏子页面？

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

供参考：导航到主购物车我使用这个 link

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

一般显示订单和导航，我希望在访问此页面时立即隐藏导航。

我的方法仅在我访问此 links

时隐藏导航

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 个小时，但没有任何效果，我需要你的帮助:(

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 隐藏子页面？

How to hide sub-pages using jQuery?

html

javascript

jquery

prestashop-1.6