6

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

我想使用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 。

提前致谢。

4

4 回答 4

19

你所拥有的是无效的 HTML，所以它没有呈现你期望的样子。您不能将 a<div>放在 a<table>中并让它包含<tr>元素；您可以在元素<div>内包含 a ，<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 查看此 jsFiddle并使用 Firebug 检查表格，您会注意到<div>元素位于表格之前并且为空，并且不包含您希望它们包含的行。

于 2012-07-01T14:30:15.360 回答
0

将 div 放在表格单元格内。见这里http://css-tricks.com/using-divs-inside-tables/

于 2012-07-01T14:18:53.233 回答
0

为什么要在表格中使用<div>标签？你应该驱动你的<tr>标签。

请在这里试试这个小提琴

祝你今天过得愉快

于 2012-07-01T14:20:00.630 回答
0 
$('#selector').click(function () {
    $('.registration-part').parent().find('td:first').fadeOut('fast');
    $('.login-part').parent().find('td:last').fadeIn('slow');
});
于 2012-07-01T14:26:49.147 回答