0

私はセバスティアーノです。このトピックに似た簡単な質問があります。

" 1 つのテーブルをフェードアウトし、jquery を使用して別のテーブルに置き換えますか? "

コード (最後に投稿されたもの) を試してみましたが、うまく動作しますが、サイトの実行時に最初のテーブルを既に表示しようとすると、いくつかの問題が発生します。最初のテーブルが表示されたままになり、他のテーブルが下に表示されることがあります最初の1つ。

誰かがそれを手伝ってくれますか？それは素晴らしいことです。

これはコードです：

    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;

            $(".hnd").click(function(e){
                e.preventDefault();

                if(sliding == true) return;

                sliding = true;

                var tblId = $(this).attr("href");

                if(!current){
                    $(tblId).fadeIn(speed, function(){
                        current = tblId;
                        sliding = false;
                    });

                } else {
                    $(current).fadeOut(speed, function(){
                        $(tblId).fadeIn(speed, function(){
                            current = tblId;
                            sliding = false;
                        });
                    });
                }
            });
        });
    </script>

    <style type="text/css">
        .tbl{
            border: 1px solid;
        }
    </style>
</head>
<body>


<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>


<div id="table1" class="tbl">
    <table>
        <tr>
            <td>foo</td>
        </tr>
        <tr>
            <td>bar</td>
        </tr>
    </table>
</div>

<div id="table2" class="tbl">
    <table>
        <tr>
            <td>foo 2</td>
        </tr>
        <tr>
            <td>bar 2</td>
        </tr>
    </table>
</div>

<div id="table3" class="tbl">
    <table>
        <tr>
            <td>foo 3</td>
        </tr>
        <tr>
            <td>bar 3 </td>
        </tr>
    </table>
</div>

<div id="table4" class="tbl">
    <table>
        <tr>
            <td>foo 4</td>
        </tr>
        <tr>
            <td>bar 4</td>
        </tr>
    </table>
</div>

<div id="table5" class="tbl">
    <table>
        <tr>
            <td>foo 5</td>
        </tr>
        <tr>
            <td>bar 5</td>
        </tr>
    </table>
</div>

</body>
</html>
4

4 に答える 4

1 
$(".tbl").not(':first').hide();
于 2013-07-27T14:31:38.247 に答える
0

より簡単な解決策は、クリック機能の前にこの行を追加することです

$('#table1').fadeIn(speed);

$(".hnd").click(function(e){
...
于 2013-07-27T15:01:38.303 に答える
0

ここにフィドルがありますhttp://jsfiddle.net/DMRyL/

@Shivam は理論的には正しいですが、機能させるには追加のコードが必要です。

最初に変数を次のように設定します。

tbl = $(".tbl").not(':first').hide();

それで：

if(!current)
{
    current =  $(".tbl:first");
}
$(current).fadeOut(speed, function(){
    $(tblId).fadeIn(speed, function(){
        current = tblId;
        sliding = false;
    });
});
于 2013-07-27T14:39:07.777 に答える
0

最初のテーブルにクラスを追加できます。

<div id="table1" class="tbl first">

変数を次のように設定します

tbl = $(".tbl").not(':first').hide()

クリック イベントで次のクエリを使用します。

if( $(document).find('.first') ) $('.first').hide(); //if class first is found hide it
于 2013-07-27T14:51:41.983 に答える