0

我在这里搜索了一些类似的主题，但我无法使它们适应我的确切情况。我有一个简单的单页网站（嗯，我希望它是一个单页），顶部附近有五个超链接。我为每个链接显示五个不同的表格，而不是为每个表格创建一个新页面并使用指向它们的常规链接我认为在同一页面上淡出一个表格并淡入其他表格会很好，具体取决于显然点击了哪个链接。

所以默认页面的顶部会有导航：

<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>

其他四张桌子将被隐藏。然后，如果单击表 2 的链接，则表 1 淡出，表 2 淡入，其他四个表/链接相同

所以问题是，我需要什么 jQuery？我知道我需要使用淡入/淡出，replaceWith但我没有成功尝试修改我在这里找到的其他一些示例。一些具有多个表的具体示例将不胜感激。

4

4 回答 4

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 回答
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');
    });        
}

编辑：让浏览器等到可见表淡出，然后再开始淡入另一个表

于 2013-01-07T14:08:43.187 回答
0

不要重新发明轮子，使用 jQuery UI 之类的东西。查看Effect此处的示例：http: //jqueryui.com/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 回答