0

我是塞巴斯蒂亚诺。我有一个类似于这个主题的简单问题：

“使用 jquery 淡出一个表并用另一个表替换？ ”

我已经尝试了代码（最后一个发布的）并且效果很好，但是当我尝试在运行站点时使第一个表已经可见时遇到了一些问题：有时第一个表仍然可见，而其他表只出现在下面第一。

有人可以帮我吗？这将会非常棒。

这是代码：

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

您可以将一个类添加到您的第一个表中。

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

将您的 var 设置为

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

在您的点击事件中使用以下查询。

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

更简单的解决方案是在点击功能之前添加这一行

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

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

这是一个小提琴http://jsfiddle.net/DMRyL/

@Shivam 在理论上是正确的，但是您需要一些额外的代码才能使其工作。

首先像这样设置你的var：

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