Question

尝试获取导航选项卡，以根据其被选择的选项卡来切换内容，但是内容没有切换，并且默认显示所有内容且未隐藏。

我尝试过onclick = showBody（“ tabid”）却没有运气。

现在的代码如下；

<section class="border-black">
    <div class="container sr-subresults-nav">
        <ul class="sr-navigation">
        <li class="sr-subnav-item" onclick=showBody("bridgerectifiers")>Bridge Rectifiers</li>
        <li class="sr-subnav-item" onclick=showBody("limitingdiodes")>Limiting Diodes</li>
        <li class="sr-subnav-item" onclick=showBody("sfrecovery")><a class="sr-nav-link" href="">SF Recovery</li>
        </ul>
    </div>

<section class="pt-1 mb-0 border-black">
    <div id="product-results">
        <div id="bridgerectifiers" class="search-result-products">
            <div class="diodes-rectifiers-content" id="bridge-rectifiers-diodes-filter-div">
                <h6>Bridge Rectifiers</h6>
                content for bridge rectifiers goes here
            </div>
        </div>
        <div id="limitingdiodes" class="search-result-products">
            <div class="diodes-rectifiers-content" id="current-limiting-diodes-filter-div">
                <h6>Current Limiting Diodes</h6>
                content for current limiting diodes goes here
            </div>
        </div>
        <div id="sfrecovery" class="search-result-products">
            <div class="diodes-rectifiers-content" id="super-fast-recovery-diodes-filter-div">
                <h6>Super Fast Recovery Diodes</h6>
                content for super fast recovery diodes goes here
            </div>
        </div>
    </div>
</section>

JS

function showBody(item) {
    hideBody();
    if (item == "bridgerectifiers") {
    $("#bridgerectifiers").show();
    $("#bridgerectifiers").hidden = false;
}
    if (item == "limitingdiodes") {
    $("#limitingdiodes").show();
    $("#limitingdiodes").hidden = false;
    }
};

    function hideBody() {
    $("#bridgerectifiers").hide();
    $("#bridgerectifiers").hidden = false;
    $("#limitingdiodes").hide();
    $("#limitingdiodes").hidden = false;
}

希望默认情况下隐藏所有内容，并选择显示与该选项卡相关的内容的选项卡，而所有其他内容均隐藏或不显示。 js和jquery的新功能，因此可以打开onclick以外的其他选项。

Answer 1

在hideBody（）函数中，应删除$("#bridgerectifiers").hidden = false;和$("#limitingdiodes").hidden = false;。它们是再次显示元素的代码。

您还可以从$("#bridgerectifiers").hidden = false;函数中删除$("#limitingdiodes").hidden = false;和showBody()，因为它们与$("#bridgerectifiers").show();相同。

或者您只使用以下代码。

function showBody(item) {
    hideBody();
    $("#" + item).show();
};

function hideBody() {
    $(".search-result-products").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="border-black">
    <div class="container sr-subresults-nav">
        <ul class="sr-navigation">
            <li class="sr-subnav-item" onclick='showBody("bridgerectifiers")'>Bridge Rectifiers</li>
            <li class="sr-subnav-item" onclick='showBody("limitingdiodes")'>Limiting Diodes</li>
            <li class="sr-subnav-item" onclick='showBody("sfrecovery")'>SF Recovery</li>
        </ul>
    </div>
</section>
<section class="pt-1 mb-0 border-black">
    <div id="product-results">
        <div id="bridgerectifiers" class="search-result-products">
            <div class="diodes-rectifiers-content" id="bridge-rectifiers-diodes-filter-div">
                <h6>Bridge Rectifiers</h6>
                content for bridge rectifiers goes here
            </div>
        </div>
        <div id="limitingdiodes" class="search-result-products">
            <div class="diodes-rectifiers-content" id="current-limiting-diodes-filter-div">
                <h6>Current Limiting Diodes</h6>
                content for current limiting diodes goes here
            </div>
        </div>
        <div id="sfrecovery" class="search-result-products">
            <div class="diodes-rectifiers-content" id="super-fast-recovery-diodes-filter-div">
                <h6>Super Fast Recovery Diodes</h6>
                content for super fast recovery diodes goes here
            </div>
        </div>
    </div>
</section>

如何切换标签导航

1 个答案: