淡出一个表，并用另一个使用jQuery替换？ [英] Fade out one table and replace with another using jquery?
问题描述
我在这里找到了一些类似的主题，但我无法使其适应我的确切情况。我有一个简单的单页网站（当然，我希望它是一个页面），并在顶部附近有五个超链接。我为每个链接显示了五个不同的表格，而不是为每个表格创建一个新页面，并使用常规链接指向他们。我认为将一张表淡出并淡化其他页面会很好，具体取决于该链接显然被点击。
所以默认页面的顶部会有nav：
< a href =＃id =table1>表1< / a>
< a href =＃id =table2>表2< / a>
< a href =＃id =table3>表3< / a>
< a href =＃id =table4>表4< / a>
< a href =＃id =table5>表5< / a>
然后，默认情况下，table1会显示在页面上：
< table id =table1>
< tr>
< td> foo< / td>
< / tr>
< tr>
< td>栏< / td>
< / tr>
< table>
其他四张表将被隐藏。然后，如果点击表2的链接，表1淡出，表2淡入，与其他四个表/链接相同
所以问题是，jQuery做什么我需要这个吗？我知道我需要使用fadein / out和 replaceWith ，但是我没有成功尝试修改我在这里找到的其他一些示例。
只需将slideDown更改为fadeIn并将slideUp更改为fadeOut即可。
<！DOCTYPE html>
< html>
< head>
< title>< / title>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js><<<< ; /脚本>
< 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（速度，函数（）{
$（tblId）.fadeIn（速度，函数（）{
current = tblId;
sliding = false;
}）;
}）;
}
}）;
}）;
< / script>
< style type =text / css>
.tbl {
border：1px solid;
}
< / style>
< / head>
< body>
< a class =hndhref =＃table1>表1< / a>
< a class =hndhref =＃table2>表2< / a>
< a class =hndhref =＃table3>表3< / a>
< a class =hndhref =＃table4>表4< / a>
< a class =hndhref =＃table5>表5< / a>
< div id =table1class =tbl>
< table>
< tr>
< td> foo< / td>
< / tr>
< tr>
< td>栏< / td>
< / tr>
< / table>
< / div>
< div id =table2class =tbl>
< table>
< tr>
< td> foo 2< / td>
< / tr>
< tr>
< td> bar 2< / td>
< / tr>
< / table>
< / div>
< div id =table3class =tbl>
< table>
< tr>
< td> foo 3< / td>
< / tr>
< tr>
< td>栏3< / td>
< / tr>
< / table>
< / div>
< div id =table4class =tbl>
< table>
< tr>
< td> foo 4< / td>
< / tr>
< tr>
< td>栏4< / td>
< / tr>
< / table>
< / div>
< div id =table5class =tbl>
< table>
< tr>
< td> foo 5< / td>
< / tr>
< tr>
< td>栏5< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
I've found a few similar topics here searching but I've not been able to adapt them to my exact situation. I have a simple single page website (well, I want it to be a single page) with five hyperlinks near the top. I have five different tables to display for each link and rather than create a new page for each table and use regular links to them I thought it'd be nice to fade one table out and fade the others in on the same page, depending on which link is clicked obviously.
So the default page would have the nav at the top:
<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>
Then by default table1 would show on the page:
<table id="table1">
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<table>
And the other four tables would be hidden. Then if the link to table 2 is clicked table 1 fades out and table 2 fades in, same for the other four tables/links
So the question is, what jQuery do I need for this? I know I need to use fadein/out and replaceWith but I've not been successful trying to modify some other examples I've found on here. Some specific examples with multiple tables would be appreciated.
Just change slideDown to fadeIn and slideUp to 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>
这篇关于淡出一个表，并用另一个使用jQuery替换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
