Question

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

“Fade out one table and replace with another using 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>

Answer 1

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

Answer 2

这是一个小提琴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;
    });
});

Answer 3

您可以在第一个表格中添加一个类。

<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

Answer 4

更简单的解决方案是在点击功能

之前添加此行

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

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

使用jquery淡化时，第一个表已经可见

4 个答案: