Question

此代码显示主div标签元素正常但忽略或无法识别子div标签中的CSS和HTML。

我可以让这段代码打开多个div而不是嵌套在第一级div中的div。 6个小时后，我希望得到外界的帮助。

以下是代码：

<html>
    <head>
        <style type="text/css">
            #tabs {
                margin:20 px 0;
            }

            #tabs ul {
                float: center;
                background: #003333;
                height:25px;
                width: 500px;
                padding-top: 4px;
            }  

            #tabs ul li {
                float: left;
                margin-left: 2em;
            }

            #tabs ul li a {
                text-decoration:none;
                color:#FFFFFF;
                font-weight:bold;
            }

            #tabs ul li.active {
                background-color:#669999;
            }

            #tabs div {
                position:absolute;
                width:500px;
                height:500px;
                padding:20px;
                margin-top:2px;
            }

            #tab1 {
                background-color:green;
            }

            #tab2 {
                background-color:red;
            }

            #blueBox {
                float:left;
                width:100px;
                height:100px;
                background-color:yellow;
                margin-left:5px;
                margin-top:150px;
            }
        </style>

        <script src="js/jquery-1.4.2.js" type="text/javascript" /></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#tabs div').hide();
                $('#tabs div:first').fadeIn('slow');
                $('#tabs ul li:first').addClass('active');
                $('#tabs ul li a').click(function() {
                $('#tabs ul li').removeClass('active');
                $(this).parent().addClass('active');
                var selectedTab=$(this).attr('href');
                $('#tabs div').fadeOut('slow');
                $(selectedTab).fadeIn('slow');
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href='#Tab1'>Tab 1</a></li>
            <li><a href="#Tab2">Tab 2</a></li>
        </ul>
    <div id="Tab1">
        <p>Contents in Tab1 </p>
    </div>

<!--this next part is the part I can't get to work. The div blueBox inside the div        Tab2-->

         <div id="Tab2">
                <p>Contents in Tab2</p>
                <div id="blueBox">
                    <p>Hello</p>
                </div>
            </div>
        </div>

    </body>
</html>

我认为它与未达到父级别以获得嵌套div有关，但是尽管全都没有，但仍未能谷歌解决方案。这是一个很棒的小代码，但如果我无法使嵌套的div标签起作用则不实用。

提前致谢。

Answer 1

您只想隐藏并显示#tabs的直接子女。 Tab1和Tab2中的其他div应保持原样。要完成此操作，请使用 the direct child selector ( > ) 。

要简化工作，请更改使用#tabs div到#tabs > div 2行的行：

    $('#tabs > div').hide();                         // <== direct child selector
    $('#tabs > div').fadeOut('slow');                // <== direct child selector

但还有其他一些改进。

将$('#tabs ul li').removeClass('active');更改为$('#tabs ul li.active').removeClass('active');，因为使用active类而不是所有li类简单选择感兴趣的元素会更有效率
在fadeIn的回调中加入fadeOut，这样可以让事情看起来更顺畅，因为它确保fadeIn只开始一次fadeOut结束。实际上，整个事情看起来好得多.delay()。

$(function() {                                   // <== shorter form of doc ready
    $('#tabs > div').hide();
    $('#tabs div:first').fadeIn('slow');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
        $('#tabs ul li.active').removeClass('active');  // <== Only what you need
        $(this).parent().addClass('active');
        var selectedTab=$(this).attr('href');
        $('#tabs > div').fadeOut('slow', function() {       // <== Use a callback
            $(selectedTab).delay(500).fadeIn('slow');          // <== add a delay
        });        
        return false;
    });
});

的 jsFiddle example

Answer 2

而不是隐藏所有后代<div>元素，只隐藏第一个级别，所以改变这个：

$('#tabs div').hide();

对此：

$('#tabs > div').hide();

这解决了问题，因为它从未隐藏在第一位：）

这同样适用于此：

$('#tabs div').fadeOut('slow');
//to..
$('#tabs > div').fadeOut('slow');

Answer 3

感谢您的精彩帖子！这非常有帮助！：）

我发现有一件事，当我在我的网站上放置完全优化的jquery时，我遇到了一些问题，在两个标签上重复淡入。不幸的是，我还没有成功地辨别为什么我只用2/3标签来体验这个，但我通过改变这个来解决这个问题：

$('#tabs > div').fadeOut('slow', function() { ... });

到此：

$('#tabs > div:visible').fadeOut('slow', function() { ... });

避免在已经隐藏的div上触发回调。

JQuery简单选项卡程序不显示嵌套的Div Tag

3 个答案:

的 jsFiddle example