Question

单击Tab2时，它显示<div id="custom-sub-tab0"，单击Tab3时，它不显示任何内容。点击Tab3后，它应显示<div id="custom-sub-tab0"

HTML：

<nav class="ti_tabs u-clear">
            <ul>
                    <li><a href="#std-sub-tab0"> <span> Tab1 </span></a></li>
                    <li><a href="#"> <span> Tab2 </span></a></li>
                    <li> <a href="#custom-sub-tab0"> <span> Tab3 </span></a></li>
            </ul>
    </nav>
        <div id="std-sub-tab0" class="ti_subTabNav" data-nav="sub-tab">
            <ul>
                    <li><a href="/subtab0.html"><span> Featured applications </span></a>
                    </li>
                    <li><a href="/content/ti/en_US/amplifiers/overview/reference-designs.html"><span> Reference designs </span></a>
                    </li>
            </ul>
        </div>  
        <div id="custom-sub-tab0" class="ti_subTabNav" data-nav="sub-tab">
            <ul>
                    <li class="is-active"><a href="custtab0.html"><span> customsubtab1 </span></a>
                    </li>
            </ul>
        </div>

我的juery：

$(document).ready(function(){
        $("div[id*=sub-tab]").hide();
        $("div[id*=sub-tab]").find("ul > li.is-active").parent().parent('div').show();
        $('.ti_tabs ul li').click(function(){
                $('.ti_tabs ul li').removeClass('is-active');
                $(this).addClass('is-active');
                $('div[id*=sub-tab]').hide().eq($(this).index()).show();
            });
    });

我尝试了很多东西，但它仍然没有用。我是jquery的新手。请指导。

Answer 1

您只有两个带有id * = sub-tab的元素，因此index == 2将不显示任何内容。

以下是您希望如何编辑JS（可能）以您希望的方式工作的方式：

$(document).ready(function(){
    $("div[id*=sub-tab] li").hide();
    $("div[id*=sub-tab] li").first().show();
    $("div[id*=sub-tab]").find("ul > li.is-active").parent().parent('div').show();
    $('.ti_tabs ul li').click(function(){
        $('.ti_tabs ul li').removeClass('is-active');
        $(this).addClass('is-active');
        var items = $('div[id*=sub-tab] ul li');
        items.hide();
        $(items[$(this).index()]).show();
    });
});

Answer 2

我认为你只有2个子标签和3个LI，所以会有一个索引不匹配。

未显示相应父选项卡下的子选项卡

2 个答案: