Question

选项卡1和选项卡2按预期显示和隐藏，但嵌套的div不显示。如何修改脚本以显示/隐藏Tab 1 div / Tab 2 div和嵌套div。

脚本

$(document).ready(function() {
        $("#content div").hide(); // Initially hide all content
        $("#vtabs li:first").attr("id", "current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content
        $('#vtabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").attr("id") == "current") { //detection for current tab
                return
            }
            else {
                $("#content div").hide(); //Hide all content
                $("#vtabs li").attr("id", ""); //Reset id's
                $(this).parent().attr("id", "current"); // Activate this
                $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });
    });
    (function() {
        var bsa = document.createElement('script');
        bsa.async = true;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bsa);
    })();

HTML

<link rel="stylesheet" href="css/tabs3.css" type="text/css" />
</head>
<body>
    <div id="header">site title</div>
    <div id="vtabs">
        <ul>
            <li>
                <a href="#" name="tab1">By Service</a>
            </li>
            <li>
                <a href="#" name="tab2">By Client</a>
                <br />
            </li>
        </ul>
    </div>
    <div id="content">
        <div id="tab1">Tab 1
            <br />
            <div>Tab 1 nested div</div>
        </div>
        <div id="tab2">Tab 2
            <br />
            <div>Tab 2 nested div</div>
        </div>

Answer 1

我在代码中找不到显示嵌套div的位置。我建议你给容器divs一个类，称之为tab_contents。像这样

<div id="tab1" class="tab_contents">

然后在两个地方将此行$("#content div").hide();更改为$(".tab_contents").hide();。问题是你隐藏了#content中的所有div，但只是淡化容器div而不是嵌套的div。只隐藏容器div。

显示/隐藏嵌套div的内容

1 个答案: