0

私はここで検索しているいくつかの同様のトピックを見つけましたが、私はそれらを私の正確な状況に適応させることができませんでした。上部に5つのハイパーリンクがある単純な単一ページのWebサイト（まあ、単一ページにしたい）があります。リンクごとに表示する5つの異なるテーブルがあり、テーブルごとに新しいページを作成してそれらへの通常のリンクを使用するのではなく、1つのテーブルをフェードアウトし、他のテーブルを同じページでフェードインするのがよいと思いました。どのリンクが明らかにクリックされているか。

したがって、デフォルトのページの上部にはナビゲーションがあります。

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

次に、デフォルトでtable1がページに表示されます。

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

そして、他の4つのテーブルは非表示になります。次に、テーブル2へのリンクをクリックすると、テーブル1がフェードアウトし、テーブル2がフェードインします。これは、他の4つのテーブル/リンクと同じです。

だから問題は、これにはどのjQueryが必要かということです。フェードイン/フェードアウトを使用する必要がreplaceWithあることはわかっていますが、ここで見つけた他のいくつかの例を変更しようとして成功していません。複数のテーブルを持ついくつかの特定の例をいただければ幸いです。

4

4 に答える 4

0

まず第一に、異なる HTML 要素で同じ識別子を使用することは良い習慣ではありません:

<a href="#" id="table1">Table 1</a>`
<table id="table1">`

ナビゲーションでクリック イベントを設定するか、ハンドラを属性として明示的に指定する必要があります。

<a href="#" id="tableLink1" onclick="ShowTable(1)">Table 1</a>

次に、ハンドラーを定義します。

function ShowTable(number)
{
    //fade out table that is shown
    $('table:visible').fadeOut('slow',function (){
        $('#table'+number).fadeIn('slow');
    });        
}

EDITED：他のテーブルでフェードを開始する前に、表示されているテーブルがフェードアウトするまでブラウザを待機させる

于 2013-01-07T14:08:43.187 に答える
0

車輪を再発明するのではなく、jQuery UI のようなものを使用してください。http://jqueryui.com/effect/の例を確認してEffectください。それがあなたのために行うことができるいくつかの異なる効果があることに注意してください. 気に入った効果が見つかったら、[ソースを表示] リンクをクリックしてコードを取得できます。

于 2013-01-07T14:08:27.243 に答える
0 
<!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).slideDown(speed, function(){
                        current = tblId;
                        sliding = false;
                    });

                } else {
                    $(current).slideUp(speed, function(){
                        $(tblId).slideDown(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>
于 2013-01-07T14:20:22.373 に答える
0

slideDownをfadeInに、slideUpをfadeOutに変更するだけです。

<!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>
于 2013-01-07T16:03:49.883 に答える