当用户单击我的不同导航链接时,我试图通过将内容滑出页面来更改我的页面内容。到目前为止,我可以从我的主页滑到我的其他页面之一,效果很好。但我不确定如何滑回第一页。
我用来滑动到第一页的脚本:
<script>
function slide(div)
{
if(div == "work")
{
$('#home').hide('slide', {direction: 'left'}, 1000);
$('#work').delay(600).show('slide', {direction: 'right'}, 1000);
}
}
</script>
与我的导航菜单一起滑动的内容:
<div class='nav'>
<table class='nav'>
<tr>
<td width='23%'><a href='index.html' onclick='slide("home");' class='link'>home</a></td>
<td width='23%'><a href='#' onclick='slide("work");' class='link'>work</a></td>
<td width='23%'><a href='#' class='link'>about</a></td>
<td width='31%'><a href='#' class='link'>contact</a></td>
</tr>
</table>
</div>
<div class='content' id='home'>
<h1>hello</h1>
<table class='content'>
<tr>
<td><img src='images/icon1.png' class='icon'></td>
<td><p>i’m thobias nordgaard. a front and back end<br>
developer from denmark. i love what i do,<br>
hopefully you will too.<br><br>
Im fluid in html, css, php and improving in<br>
javascript, jquery and sass. if you dont know<br>
what these things are, all they mean is: i can<br>
make websites.</p></td>
</tr>
</table>
</div>
<div class='content' id='work'>
<h1>work</h1>
<table class='content'>
<tr>
<td><img src='images/icon1.png' class='icon'></td>
<td><p>I haven't completed any work yet :(</p></td>
</tr>
</table>
</div>