0

Tab 1 和 Tab 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>
4

1 回答 1

0

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

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

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

于 2012-06-30T18:15:26.317 回答