Question

这部法典显示,主要的tag子是轻重的,但忽略了或不承认儿童tag子和超文本。

我可以让这部法典开放多个编织品,但不能在零件的头一级穿戴。 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>

我认为,它有一些事情要做,就是要不要忘记父母一级,以获得被nes的iv,而 have却能够找到解决办法。如果我无法找到被nes的 d子去工作的话,那就算不了。

提前感谢。

Answer 1

你们只想隐藏和展示<代码>#tabs的直接孩子。在<代码>Tab1和内的其他散射机应保持原样。为此,请<><“直接儿童选择人”(>。

简单修改使用<代码>#tabs div至#tabs > div 2行:

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

但还有其他一些改进。

更改<代码>$(#tabs ul li );removeClass(活性); to $(#tabs ul li。active );removeClass(活性);,因为简单选择兴趣内容与active没有什么效率。页: 1
包括<代码>fade 在<代码>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

不要藏匿all <>/em> children<div>s,只是掩盖第一级的内容,这样就改变了:

$( #tabs div ).hide();

为此:

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

这个问题首先没有被掩盖:

此处亦如此:

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

Answer 3

感谢这一伟大职务! 这非常有益!

我发现的一件事是,当我把完全优化的争 j放在我的现场时,我遇到一些麻烦,在两条表格上出现重复 f。不幸的是,我还没有成功地发现我为什么只用2/3表格来经历这种情况,但我通过改变这种状况解决了问题:

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

为此:

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

避免引起对已经隐藏的四肢解的警惕。

jsFiddle example

友情链接