6

私は非常に特定の問題を抱えています。

フェードイン、フェードアウト関数を使用して特定のコードを挿入したいのですが、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であるため、期待どおりにレンダリングされません。<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でこの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 に答える