如何在div或其他东西中嵌入表行而不破坏jQuery fadeIn函数？

我有一个非常具体的问题.

我想使用fadeIn,fadeOut函数插入一个特定的代码,但是如果我在div标签中使用tr和td标签它就无法工作.

我有JS部分的代码：

var registrationPart = $('div.registration-part');
var loginPart = $('div.login-part');

$('span.logreg.log').click ( function () {

                registrationPart.fadeOut("fast");
                loginPart.fadeIn("slow");

}

这在html中：

<table class="table">
    <div class="registration-part">
        <tr>
                  <td>registration</td>
            </tr>
    </div>
    <div class="login-part">
        <tr>
                  <td>login</td>
            </tr>
    </div>
</table>

所以如果div中有tr,td标签,则fadeIn,fadeOut不起作用.如果我用div或span替换它们一切正常.

有没有办法如何离开tr,td,所以我不需要为div制作特定的样式表,所以它看起来像tr,td.

提前致谢.

解决方法

你所拥有的是无效的HTML,因此它不会呈现你的预期.你不能把< div>在< table>内它包含< tr>要素;你可以加一个< div>在< td>内元素,但这并没有真正帮助你.

如果要定义表的单独部分,请使用< tbody>标签：

HTML

<table class="table">
    <tbody class="registration-part">
        <tr>
            <td>registration</td>
        </tr>
    </tbody>
    <tbody class="login-part">
        <tr>
            <td>login</td>
        </tr>
    </tbody>
</table>

JavaScript的

var registrationPart = $('tbody.registration-part');
var loginPart = $('tbody.login-part');

$('span.logreg.log').click ( function () {
    registrationPart.fadeOut("fast");
    loginPart.fadeIn("slow");
}

如果您使用原始HTML查看this jsFiddle并使用Firebug检查表,您会注意到< div>元素在表之前并且为空,并且不包括您希望它们的行.

原文地址：https://www.jb51.cc/css/214733.html